I’m trying to build a feature section in my website that has three images side by side. I have a grid, then div blocks inside them with all the other images etc inside.
I have the grid set to 800px height, and the div blocks within that set to 100% height. When in the edit mode this looks like it formats fine, but when I look at it in the preview it doesn’t format correctly.
The footer (the section below this section) sits at the 800px mark, but the contents in the feature section just formats however it likes, resulting in the footer appearing to just sit on top of the section, so the images are cut off, and the text on the hover animation isn’t centered on the section. I’ve tried everything I can think of.
If I set the div block height to be 800px the grid gets these weird gaps between them, and if I change the positioning then the whole thing doesn’t work.
I feel like I’m not explaining this very well, so hopefully my read only link will illuminate what I mean.
Hopefully someone can make sense of what I’m doing wrong. If you have a look at the different screen sizes you can see more of the issue I’m looking to fix.
Hey @Micsim12, looking into your site, I noticed that your feature images being set to relative and width: 100% and height: 100%, will force it to take up all the space needed to have that dimension. Also their z-index is set to -1 which gives them the ability to be behind the footer and utilize all the space now created.
One solution I have found to limit the size of the images is to set the overflow of your feature block to hidden. After this, you still need some tweaking to do to set your grid sizes normal for all layouts but it helps with your initial issue with the footer being on top.
Please feel free to ask questions if you are stuck!
I believe I need to have the z-index of the feature images set to -1 so that they will stay behind the colour block. is this not correct?
The feature image settings are relative and 100% height so that they will fill the space. the problem is that they are scaling to be much larger than the 800px height that the feature section and the feature grid has been set to. Is this not correct, if not how am I actually supposed to set these up?
I did what you suggested but it just cuts the blocks and images off at 800px, it doesn’t actually scale the images down to the 800px height I have set does that make sense?
I’ve added an image here with examples of what I mean to hopefully illustrate my point a little better.
