Overlapping Boxes

Design help General
1

Hey guys,

I have an issue with the home page of a new design I’m creating, which is driving me mad.

If you look at the home page here - http://chubby-changer.webflow.io/

You’ll see the 4 featured post boxes:

https://www.evernote.com/l/AKfPlGoZO9VLTq_nHfP92V4dI8lpToSHQtEB/image.png

Now if you start to resize your desktop browser, those boxes begin to overlap. This shouldn’t happen, they should be resizing before it gets to the breakpoint for the tablet.

https://www.evernote.com/l/AKf_esJRGcVD9r6hjYrs8L8gjxExfLBshDcB/image.png

Now, I’m aware that this is happening because some of the boxes have fixed pixel widths. However I can’t seem to keep the same sizing even when I use 100% width on them, I wanted to keep them as they are, minus the overlap basically. Not larger in width.

Any help would be much appreciated! :slight_smile:

Thanks,
Andrew

Here is my public share link: https://preview.webflow.com/preview/chubby-changer?preview=b7954428a3d3aad9b7c997169815505a

2

Preview link not working.

Try setting max-width to 100% for those boxes with fixed width.

3

Hey Sam,

Sorry about that, not sure why it didn’t work. Just checked this one and it does:

https://preview.webflow.com/preview/chubby-changer?preview=b7954428a3d3aad9b7c997169815505a

I did try the 100% max-wdith, however because the featured image and meta info are fixed, it widens the box making it look wider than it should:

https://www.evernote.com/l/AKeYCrraPcJEd43QMgQEl2wBP9ugbMrzoQYB/image.png

Thanks,
Andrew

4

Post Box Wrapper and Featured Post Meta Box, both set to max-width: 100%

5

Perfect, it worked :slight_smile:

Thanks for your help!