Hi there everyone!
I’m trying to create a div layout that will look like so:
And here’s what I’ve written to do so:
The issue I’m having is that no matter what I try, the two top divs stack over/under and remain left/right when in mobile view. Here’s what I get when I compress to mobile view:
Could someone tell me what I’ve done wrong to cause this to happen? I’ve tried playing with padding but the issue remains.
Thanks for your time!
It looks like the total width of the two divs is too large for the space allowed. Did you check that?
I’m using a percentage for both the divs and the images and when reading, it was my understanding that it would scale properly all the way to mobile view as long as the percentages remained under 100% of the viewable frame.
That’s because they are still floated to do so. Maybe add a query to lose the floats and reset widths.
My desire would be to keep them side by side and lose the over/under of them. Would losing the floats allow for this or would it place div_2 under div_1?
In that case, give the image containers box-sizing: border-box and they should fit. As they are, they are whatever % you set + padding + margin.
Thank you sam, that worked great!
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.
