Hi there,
First of all here is the page I need help with across mobile and desktop
http://martin-venezky-photograph-6e1a9791c04bd.webflow.io/gallery
And here is my read-only site (note - it’s the New Machinery page where I’ve made all these changes.)
https://preview.webflow.com/preview/martin-venezky-photograph-6e1a9791c04bd?preview=18ff7eebd3dac322a6d4d9a1b73bc2ff
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!
Hmmmm … can anyone help me here?
No way …
- To know exactly what you want
- To know What do you mean when you saying “limit scrolling on mobile” (overflow?)
- Or fix your problem (You combine endlees flexbox elements - neagitve margins - absolute position, empty cols “salad”)
Problems:
-
Huge
negative right/left (-75vh!) margin is very "buggy"/Weird
- You create endlees empty cols (dirty code // hard to debuug)
Maybe try this examples to learn more about flexbox and layout
-or- the new UI
Or try to work with this grid for complex layout :
Summary 
Start from Zero
To hide scroll X on mobile try this (add two lines of custom CSS to your selector)
.my-selector{
overflow-x: hidden;
}
Hi Ezra,
I’m sorry, was my 4 screenshots not descriptive enough? Or maybe the fact that I specifically wrote out that I know there is a huge negative right/left margin not clear enough?
As far as your point that it’s hard to know exactly what I want - I want to limit scrolling to only vertical on mobile as it says in my title. Should I spell it out a bit clearer? I want to only be able to scroll vertically (not horizontally) on mobile. Maybe look at the photo that I posted where it says specifically “what I want.” And then look at the photo where I show the problem. Please let me know what you are unsure about there!
Funny though, you answered my question at the end with just a few lines of code (even after you said to start from zero?). That’s all I want to do, to be able to only scroll on the x axis (vertical). Unfortunately, that code doesn’t work though.
also I’m aware of the empty columns, it’s so things can line up cleanly =) . If webflow had css grid, then I wouldn’t have to do that. So using empty flexbox containters is what I’ve done.
If you have another suggestion of how to better achieve what I’ve put in photos above, or are still confused, lemme know! Thanks for your help,
_W
overflow-x: hidden;
If this solve your problem this is great. So mark as solution to close this topic. Anyway try to learn the link i added. About CSS grid - in the future i am sure webflow will support this. Meanwhile this is not fully support.
Another Answer
https://stackoverflow.com/questions/8635799/overflow-xhidden-still-can-scroll
