center a title vertically so it sits...
I have 2 columns; each 6 wide of 12.
If I have an image on the left; I want the Title on the right to be somewhere not so close to the top.
It is fine for the title to sit on the top if you are looking at it from a tablet or a smartphone; But, if you are looking at it with a computer wide screen the title floating on the top just doesn't look right.
I am guessing that the only way to do this is to add margin or padding from the top...Since there is no "center vertical"
Is this correct?
(As this would be a css limitation...)
If I have an image on the left; I want the Title on the right to be somewhere not so close to the top.
It is fine for the title to sit on the top if you are looking at it from a tablet or a smartphone; But, if you are looking at it with a computer wide screen the title floating on the top just doesn't look right.
I am guessing that the only way to do this is to add margin or padding from the top...Since there is no "center vertical"
Is this correct?
(As this would be a css limitation...)
Hi Greg.
I would float the title right and add top margin until it appears where you want it. Then as you narrow down you can remove the float and reduce the margin.
I would float the title right and add top margin until it appears where you want it. Then as you narrow down you can remove the float and reduce the margin.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
It's easy to overlook something you're not looking for.
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
I figured I would have to make it work similar to that, but I am using 2 columns and just reducing the top margin where the title sits... I don't think float right is absolutely necessary is it? This way I also have the title centered horizontally in the column... So in each size for the different views all I need to do is reduce the top margin spacing.
On the lower resolutions, such as smart phone or tablet, I increase the column size so it is full page (12) instead of half (6)
On the lower resolutions, such as smart phone or tablet, I increase the column size so it is full page (12) instead of half (6)
Greg, yould you post an url to your site? It helps seeing the problem.
Ha en riktig god dag!
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Don't know if it is something like this you are after. See attachment.
Ha en riktig god dag!
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Hi thanks for that, however I am using Responsive layout maker, not Responsive site designer...
Do you have a version on RLM?
Do you have a version on RLM?
Maybe you could put the image and title in a row as an unorded list, then after export, add some Flex-Box code in there and to your custom CSS?
So you would make that row a flex-container and each <li> would be a flex-item, aligned along the middle axis.
See an example here:
http://www.sketchingwithcss.com/samplec … tml#center
You can set the items to be equal width, or vary them (picture twice as wide as title, for example).
You can switch the items to a column for mobile screens, and change their order if needed, for example:
Full screen: picture left and title right
Mobile: title top and picture bottom
No need to mess with margins and positioning at various breakpoints
So you would make that row a flex-container and each <li> would be a flex-item, aligned along the middle axis.
See an example here:
http://www.sketchingwithcss.com/samplec … tml#center
You can set the items to be equal width, or vary them (picture twice as wide as title, for example).
You can switch the items to a column for mobile screens, and change their order if needed, for example:
Full screen: picture left and title right
Mobile: title top and picture bottom
No need to mess with margins and positioning at various breakpoints
I love deadlines. I like the whooshing sound they make as they fly by. (Douglas Adams)
https://www.callendales.com
https://www.callendales.com
Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.