-
Posts
-
Hi there, I really like the new grid row or flex row content element. Is a nice way to give a site a contemporary look and feel by extending the design over the entire width of the screen.
With that being said, I’m running into an issue where I want to place an image in one cell and align it with a text element in the other cell. Is there a way to give both cells a specific height, so I can crop the image accordingly, and hence content in both cells would be perfectly aligned?
Many thanks for any help.
Hi MadRhino!
Not sure I understand correctly. You have elements in each cell and you want to align them? They should be flush at the top by default but if you want to move one down a bit then you can drag a separator element in front of the element you wish to move down. When editing the separator you can set it to white space so it’s not visible and is just used to move stuff down.
If that’s not correct then send us a link to your page and take a screenshot highlighting what your trying to do so we can get a better idea.
Cheers!
ElliottHi there,
I’m sorry that my request wasn’t clear. I’ve attached a screenshot to hopefully help you understand what I’m struggling with.As you can see, I’m working with your “Grid/Felx Row” layout element.
In the left cell, I have placed the image with the cyclists (954px x 500px).
In the right cell, I have added a text element, the exact dimensions of which I can’t be sure of. Hence I’ve wrapped the text element with <div style=”width: 100%; height: 500px;”> … </div> to give this cell some exact dimensions.So, here comes the thing. Since both, the image and the text element share the exact some height of 500px, I would naturally assume that the image aligns flush at the bottom with the text element.
Unfortunately, this is not the case. Please see the screenshot. There’s still a sizable gap of about 30-40px. Where am I going wrong here?
I thought that maybe your theme is somehow resizing the image because I can’t be sure of the exact pixel width, but when I take a screenshot of the page and crop the image out of it, it measures exactly 954px x 500px. Can you help?
I think it would be nice to give your “Grid/Flex” row element the option to work with a fixed height to make this process easier.
As always, many thanks for any pointers ….
Sorry, but it just occurred to me that I didn’t consider the padding of the text cell.
Hence, I increased the height of the image from 500px to 560px to account for the 30px padding at the top and bottom of the text element next to it.
As you can see, this nearly closed the gap, but there’s still a small gap of about 2-3px.
Any ideas of where I’m going wrong here?
Hey!
I think where the image is supposed to display I’m seeing a shortcode instead.
[hover_pack img=”http://www.karlmohr.net/wp-content/uploads/PH_WID_TourFrance.jpg” link=”http://www.karlmohr.net” width=”954″ height=”560″ effect=”flow” opacity=”80″ title=”Ronan Pensec Travel” text=”Accepting Bookings Online”]Cheers!
Elliott
- You must be logged in to reply to this topic.