First of all here is the page I need help with across mobile and desktop
And here is my read-only site (note - it’s the New Machinery page where I’ve made all these changes.)
So I’ve got a problem where in essence, I want my images to be on this column layout on desktop
4 / 1 / 3 (img inside) / 3 (img inside) / 1
And on mobile, I want 2 images side by side (so I can’t change the phone column layout to have the images stretch to full-width as it does by default)
what I want on desktop
what I want on mobile
Now this currently works as you can see above, because I’ve essentially just had the row layout stay the same on desktop and mobile, but on mobile the columns without images inside of them simply get pushed off the screen by having the margin leave the screen.
Have a look at my margins on the mobile breakpoint and you’ll see they are set at -75vw and -15vw, this is how I achieved my desired look
Now this makes it LOOK ok, but, the issue comes in when you are on a phone and you try to scroll horizontally because then column moves from left to right. As shown in this photo
I would prefer to not change the column layout. I’ve made it stretch across the full viewport width to line up with nav menu up top (that is on the same column layout). I know I could simply calculate it all in percentages and have that change as the browser get’s smaller, but I’m wondering if there is a way to maintain the columns.
if there was a way to prohibit horizontal scrolling on mobile, then this, of course, would be solved.
Does anyone have any ideas? Thanks!