Streaming live at 10am (PST)

Div block with image collection - odd behaviour


I would like to find out why my div block with collection image is behaving this way on mobile? I just want it to be positioned with padding 20px from right as well.


Any advice appreciated :slight_smile:


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Hey @paulina

Your read-only link isn’t working, so I cannot tell you for sure if it is what I think.
But what seems like, based on your image, is that you have a padding on a parent of the Div, and are setting the Div’s width to 100vw. What you should have is a Width of 100% instead of vw.

What is happening is something like this:
the viewport is 320px (iPhone SE), the parent of the div has 20px padding on the left, and your div have 100vw width.

So your div becomes 320px, and it is being pushed to the right by the parent’s padding, and it is now outside the page by 20px causing an overflow.

If you instead use 100%, it will be 100% of the avaliable space, which will be 320px (viewport) - 20px (parent’s padding) = 300px.

Hope that wasn’t very confusing. Let me know if you need some more clarification. And also fix the Read-Only link or post the published site, so we can inspect and help you further if needed.

1 Like

That’s a missing puzzle. Thank you for explaining :slight_smile:

1 Like