Disable horizontal scrolling on Desktop and Mobile

Hi All,

I’ve read a few posts on this but it doesn’t seem to be working for me. I’d like to disable Horizontal Scroll on both desktop and mobile on all pages, mainly because it’s causing havoc on my mobile version (elements sitting on the far left, with space to the right).

Secondly, I’d like to know how to center the form in my footer for mobile.

Here is my link - https://preview.webflow.com/preview/jess-website-2020?utm_medium=preview_link&utm_source=dashboard&utm_content=jess-website-2020&preview=a97f64701de269cc20ea0e30c5203123&mode=preview

Any help would be amazing!!

Jess


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

@jessstanley7 Awesome site! To fix the horizontal scrolling issue, try setting each section’s Overflow to Hidden.

As for your form for mobile, is this what you want it to look like?

If so, when in the mobile portrait or landscape mode, open the footer symbol and change your flex box div in the Layout section to Vertical instead of Horizontal. Set Align to Start. You’ll need to adjust the padding and margins of some of the parent divs to get the form to sit closer to the left. You can also set the Text Fields of the form to be 100% width.

Hi LunarLight!

Thanks so much for your help. We’ll start with the form, that was great for mobile (fixed) but now working with desktop I’d like it to be horizontal like this screenshot but in the middle. I’ve included my settings, im sure ive done something super basic wrong:

Secondly, with the overflow, I started to go through on mobile and change sections so over flow is hidden, however it’s started to cut off vertical over flow:

Screen Shot 2020-02-06 at 11.07.36 am

I read somewhere to add this code:

body { overflow-x: hidden }

Would that help?

Thanks!

@jessstanley7 What browser are you using? In Chrome, your site looks perfect. Here’s a screen shot of what I see in Chrome:

Maybe for some over-kill centering of the form on the desktop version, select the Flex Space Div inside the Form Block. Since that div is set to relative, add a 100% width and make the left and right margin AUTO.

As for the photo cut off, it looks like your image has a -50 top margin. If you make that zero in phone view (or wherever you’re seeing that cutoff with Hidden-Overflow applied) you should be able to turn Overflow to hidden again.

Not sure if you’ve tried out the x-ray mode (the button right in the middle of the array in the lower left corner), but it’s pretty handy for spotting inflated or deflated margins, padding, divs, etc.!

Screen Shot 2020-02-05 at 9.07.54 PM

@jessstanley7 After looking at your form some more, it seems you could remove a few divs. I got rid of the div called 57 Percent Column and the top Flex Box Div (the first one under the Content Wrapper Container). I just moved the Top Margin Div outside of those and deleted them. After that, it will mess with your alignment. You’ll need to select the Top Margin Div and give it a width (I gave it 80% for desktop and 98% for mobile). Since it’s already set to relative, and once it has a width applied, you can make the left and right margin AUTO and it will force center the form.

I hope I’m not missing something. I’m sharing a screen shot in the hopes it kinda shows what I did (you’ll see the missing divs, and the settings added to the Top Margin Div). I hope I didn’t overlook any styles that might be connected to something else in the layout. Ah, hope I don’t cause you any trouble with this!

Hi LunarLight,

Thank you so much for all your help - you’ve been so generous.

Form updates - love it, working well now.

Overflow - only issue is that I actually want my image to overflow into the Hero section above as a design element :slight_smile: Is there a way I can set everything to hide overflow horizontally but not vertically?

Similar to the the orange blob lower on the page, that get’s cut off too and I want it to sit over two sections.

Thanks,

Jess

@jessstanley7 Oh right! Of course you want it overflowing the hero section! Yes, that is the better design decision :wink: SOOOooo, if you’d like, you can remove the -50 top margin from the image and give the section a -50 top margin. I only tried that on the mobile site since the other breakpoints don’t affect the image cut off. With the section having the negative margin, hiding overflow won’t affect the photo.

It probably goes without saying, but I’d give a subclass to any section you tweak the margins on.

It looks like the orange blob is in a div outside the sections? Does it now work if you change overflow to hidden? Of course maybe with everything else set to hidden, there won’t be a horizontal scroll issues when in mobile format. Fingers crossed.

If the orange blob is getting cut off, it could also be because of its z-index. On my end, however, it looks perfect. Although maybe what I’m seeing isn’t how you intended it!

Your site is really lovely…

Ok I’m slowly getting my head around the overflow situation, I think I’ll keep playing with it and come back if I have any issues.

While I have you and you are brilliant. Mind if I ask 2 more questions?

With the blobs, I’m struggling to position them on all the different screen sizes. Is it best to have them out completely separate (not in content sections) and is it better to move them around with “position” set to relative or “spacing”.

Secondly on mobile, could you please help me move my logo into the middle in the nav?

Thank you so much for your kind words :slight_smile: It’s been a hard slog teaching myself how to use webflow but it’s so very worth it!

Hi @jessstanley7, OK… hopefully I didn’t miss any of the steps that worked for me. Here’s this tangle of words:

Centering Logo in Mobile View
While in the mobile breakpoint view:

Under NavBar, go to Content Wrapper. Set Display to Flex – Vertical with Align set to Center.

Under the Brand Link, move the logo image outside of the Container 2 and delete the container (it’s not necessary here). Your logo should appear centered. Of course now the other menu items will have dropped vertically.

On the Nav Menu Div, adjust the top margin to move the menu items back into place. I used -25?

Select your Navlink style and make the right margin 0. After that, the logo and your nav items will be centered.

Looks like you’ll want to add a little top margin to the Brand Link so your logo has some breathing room?

——
Blobs
I’m not sure if this is the best approach but this seems to work:

Remove all animated figures from their sections so they’re on their own. Set a z-index of 3 or 4 to each… except the green blob needs to have a z-index higher than the first content section (the one with a subclass of iPhone). You can change overflow to hidden at this point and they still seem to work. EDIT: Green blob… IF you don’t want it scrolling on top of the iPhone section, then make the z-index lower… I was assuming you wanted the blobs to float on top of all content except text. Derp.

Green Blob:
After the green blob, set a z-index for the Hero Section that’s higher than the green blob. Like 6 or 7.

Purple Blob:
Set the z-index of any sections it overlaps to be 5 or 6 (or higher than the purple blob z-index)

Orange Blob:
Same kinda thing… except in this case, the Quote Box section is static. In that case, select the Top Margin div and give it a z-index of 5 or 6, or something higher than the orange blob z-index

Long story longer, this seemed to work on my end:

Green blob — z-index = 5
Hero Section — z-index = 6
1st Content Section — z-index = 4
Purple blob — z-index = 3
Content sections on either side — z-index = 4
Orange blob — z-index = 3
Top Margin div — z-index = 4

You can give them any values in that hierarchy that make sense to you.

I’m sure there are many ways to skin a webflow site, so I don’t profess that this is gospel. But hey, if it works… right?

1 Like

Element positioning when you want it oriented to the screen…
As I understand it, it’s much better to use the positioning values with absolute or relative positioning when placing elements like the color blobs. Absolute positioning seems perfect for your purpose since you can use the locations under the positioning type to get it in the general ball park (lower left, lower right, upper right, full screen, etc). Then use the positioning on positioning panel to fine tune. Of course as you’ve discovered, you’ll still have to tweak for each media breakpoint.

EDIT: one of my new favorite youtubers is Kevin Powell. He has a short and sweet video on absolute and relative positioning that’s been so helpful for me with styling in Webflow:
CSS Positioning: Position absolute and relative explained

1 Like

Thanks for this.

Mobile nav worked a treat :slight_smile:

Will work on the tonight!

That video is so helpful :slight_smile:

1 Like

Oh hey @LunarLight - me again :stuck_out_tongue:

My site is live which is super exciting (www.jessicastanley.io) - thank you so much for all your help.

One thing I’d love to improve is the images on the case study pages. I would love for it to be a full-width slider, but I could only figure out this 2x2 grid when it’s connected to the CMS - I have a high-level of attention to detail

Any suggestions? :slight_smile:

1 Like

@jessstanley7 It looks AMAZING–I love so much about your site! Congratulations too!

Summary

Looking at the source code, the div with the class content-wrapper w-container has a max width of 1090. Since you’d like the child div (the images) to be full window width, while retaining the fixed width of the written content, the following link should help you with your settings:
Full Width Inside Fixed Width Div

I think it boils down to these values for the div containing your grid (collection-list-wrapper w-dyn-list):
(the 50% pushes from the left of the parent div with the margin-left of -50vw left-aligning it to the screen). In theory it should work? Using % and vw should help keep it responsive. Otherwise, could just make a subclass for display only if you’re happy with how it looks on mobile.

 width: 100vw;
 position: relative;
 margin-left: -50vw;
 left: 50%;

Thanks :slight_smile:

I’m not so caring about the full width of the container (I’d actually like it to line up with the text like it does now).

I’m more after a gallery where there is just one image and you can click through. The template I’ve used does provide one, but you can only add 2 images:

https://preview.webflow.com/preview/veritas-cms?preview=a97f64701de269cc20ea0e30c5203123&pageId=5dd6d5f5f456b913133484e5&itemId=5dd6d5f5f456b90d49348613

Like its restricted to 2 in the CMS

Any help would be awesome!

Ha, I totally got that wrong… reading comprehension apparently isn’t my strong suit!

I’ll take a look. Of course it seems sliders can behave like a bear… getting the database and the javascript to talk to one another… uh, I’m not sure how Webflow handles that. Can you set CMS images as backgrounds?

1 Like

Ok, so I have figured out how to add more images to the slider (via settings on the right) but when I copied and pasted it into my project and tried to link to the “gallery” in the CMS, it’s not in the drop down:

It makes me think Sliders like this can’t be used and connected to the CMS?

I don’t mind adding the images statically, as I’ll only ever need these 6 pages (it’s not like a blog where the CMS is helpful)