Streaming live at 10am (PST)

Overlapping Boxes


#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:

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.

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:

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!


#6

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.