Unintended vertical scroll

Hello,

Thanks in advance for attention and help.

I have make some changes on my main page and add a new slider.

From that moove I obtain a vertical scroll and I am checking everything since that to fix.

I have find this article but I don’t think it applies and I don’t know where and how to …

Do anyone would have an idea for a beginner, on how to make this better ?

Great day.

Best regards.


Here is my site Read-Only

I’ve had a look but I’m a little bit uncertain as to what your issue is (that might be because I’ve only had 1 coffee today haha).

So I can see where your slider is, was it your intention for this slider to only be 1304px by 631px? Did you want it stretched full screen?

Thanks for your reply.
Your coffee was probably good !
No It is not my intention but I remember I had problems to center everything and adopt that on the go.
Next tea is coming for me :wink:
How could I go fullscreen ?
Auto or 0 Width and Height ?
Thanks.
I am a real beginner :wink:

I’m a bit of a coffee geek, experimenting with a new blend this morning and it’s lovely! Grinding your own beans at home is the best way :smiley:

So I’ll go through what I would do to, in my opinion, make your site look better. Naturally, this is entirely my own opinion, and so others may reply with their own preferred and equally valid methods :slight_smile: I always learn lots by seeing what other people do! So feel free to pick and choose any of my methods below.

First of all,
I would start by including a Wrapper div. Just an ordinary div, which I set to Max Width 1440px width, flexed vertically with the child elements centred. I would then put your New Slider home and Flex parent 5 elements in this. Finally, in the body wrapper’s spacing settings, I would hit the “Centre Element Horizontally” option, and apply padding of 10 px to the body wrapper (completely optional, I like to have a gap between the edge of the screen and the site content on smaller breakpoints but feel free to not apply this padding if you prefer). The below screenshots show the result of all of this this:

2019-11-06_11h33_50

So now we have all of our content centred in the page. I also don’t tend to style the Body, so I have removed all of the spacing and size settings that you applied to Body.

Next, I would remove all of the spacing settings that you have applied to New Slider home, Flex parent 5, and each of the Mask and all Slides just so we are starting with a blank canvas. I then applied a height of 700px to New Slider home. This is the result:

I noticed that you have Navbar thin in each of the slider masks? Why not just have a single instance of this at the very top of your page structure? Below are screenshots of how I would style the navbar (I don’t like Container, so I have replaced it with a standard Div. Others may disagree though!). By replacing the Container with a Div, there is no longer anything with a fixed width on your page and so when your breakpoint reduces in size, everything flexes nicely. Here is the result, with screenshots of each of the Navbar elements and their settings… I also placed the Navbar thin into a section which I have styled appropriately:

2019-11-06_12h06_59

2019-11-06_12h07_30 2019-11-06_12h08_05

As a final touch, In each of the Slides, go into the image background settings and centre it. That way, when the breakpoint reduces in size, the Slide image remains centred.

2019-11-06_12h10_50

Note that you will still need to adjust settings for everything we have covered above in order to make it mobile/tablet friendly. All of the above is for Desktop only… you still have a lot of work to do for smaller screen sizes. You will need to go into each device size and adjust the settings appropriately.

It will take time to get used to this, but it will come! Just keep experimenting and playing around.

Here is a Loom video of the final product if you follow each step above:

I hope this helped. I have been told that I sometimes have abstract ways of working - however even if you only pick out one thing from this guide that you like, then it’s worth it :slight_smile:

Feel free to reply on here or shoot me a private message if you need anything else.

1 Like

That’s not what I call “abstract”… gosh !
Thank you so much Andy !

Your way of working seems to match mine and I will apply all I can.
I hope I can understand because in terms of result that’s where I want to go to.

Of course the “thin navbar” has to be outside of the slides, it was before. Only one of the tests to improve centering…

Very nice you make your own coffee.
If you do it so well than explaining it should be much better than the Jura brand coffee that I drink sometimes.
At the moment I am more Earl grey (Dammann french old brand).

Thank you very much again Andy.
Of course I will post results and next step.

Have a great day !

Cheers.

1 Like

You’re very welcome @Gilles, good luck and I look forward to seeing your beautiful website when it’s complete! :slight_smile:

Hello Andy,

Gasp.

I have created the wrapper and put my main elements in it but it doesn’t center.

I think everything is correct at this stage but if I continue, and adjust the slides and others elements you propose as you set them it’s a nightmare and everything in the slider change shapes and effects…

I can’t reach next stage with the screen result you show… at all.

I hope you can diagnostic and I could continue your patch. I think I have really followed to the body wrapper…

Little bit lost, sorry.

I didn’t change the access by the link.

Cheers.

Hey @Gilles,

At the time of opening your link, your elements were outside of the body wrapper… this is how it looked:

image
(all elements are children of the Body. Using the example from my guide above, only the Nav Section and Body Wrapper should be children of the Body)

Delete the navbar for now, do that later as it’s an unnecessary distraction while you sort the rest of the issues.

So delete the navbar, and drag+drop the two elements into your navbar wrapper. It will then look like this:

2019-11-06_14h41_09

And you should be good to go from there :slight_smile:

Fantastic !
Thank you.
I keep going on and follow-up.
Andy in french.
Cheers.

What a random video haha - love it!

The guy on the right pretty much sums up my emotions whenever I can’t find a solution to a design problem!

Great musician this guy. The melody soul of this famous french rock pop group. The concept of the characters would apply today. It’s good cheesy creative. I think I have little problems issuing but I try to go till the end with some arrangements. I keep continue and let you know.

I can’t make my slides size Auto Auto. It’s scrapping everything and give me a pics width of 75. I’ve seen there were two “Auto” one active and one off. It may be comes from this but I don’t know how to make it off…!

I’ve just taken a look, looks like you’ve got it sorted?

Be wary of setting a fixed width for anything (you currently have a fixed width of 1440px for the slide). It’s unnecessary and introduces a horizontal scroll on smaller viewports. You currently have content set to Stretch in your Body wrapper with a max width of 1440px - this is all that is needed. You can go ahead and remove the fixed width for the Slides.

1 Like

Yes I think I am getting out of the mess because of a wonderful doctor ! I’m admirative of your science and love the way you give your lights. The subject of the fixed width was my last message. It’s not working but may be I don’t use well the function…

Hello Andy,

I think I’ve succeed the mission because you accept yours !

Again thank you very very much.

I will see later to publish the slider mobile.
I have an alterated version.
I will find out about this width slider question.

If you have a look now, it pretty look likes what you show me a few hours before and it’s a real pleasure.

Thank you for the spirit, I will mention you in credits and publish here if I can.

Keepthefaya.

Hope to see you here again.

Kind regards.

1 Like

Awesome! It’s looking much better :slight_smile: always happy to help where I can. I’ve received lots of help on these forums in my learning, so much so that I’ve just felt confident to launch my own website! So it’s only right that I help others in return.

Keep experimenting and practising! :slight_smile:

Yes.

I try to work the same way. I give some sales and BtoB marketing advize from many years. I will continue because of people like you and because it’s like that. I will credit Jolly Good Web on the site.

I have a very good contact with Webflow. I had a longtime love with WordPress in the beginnings. The tools are making our professionnal life. So when you meet a community it’s part of the brand of the editor and part of our lives.

Here it seems to be a nice community :wink:

I will practice and experiment.

Good vibes.

1 Like

Hello Andy,

I hope you’re doing well and around you.

So sorry to write you again so quickly but the unwished scroll has been coming back…

I didn’t change anything in the main construction with the wrapper but have moved and delete a lot of elements inside the Flex parent 5.

I’ve try to fix by myself but my logical solutions are not working.

Grrrrr

Would you please help me to be lean again ?

Thanks in advance.

Have a very good day.

Cheers.

Hi @Gilles,

Unfortunately I can’t see the issue that you describe. Would you be able to make a Loom video to demonstrate the problem that you’re having?

Ah, do you mean horizontal scroll? E.g. your screen scrolls to the right when on a smaller desktop viewport?

If so, then this is caused by you using fixed widths in the following elements: Navbar 11, NavBar standard, Slide 15, Slide 16, & Slide 17.

You are telling these elements to maintain a fixed width no matter what the viewport size is. Get rid of these fixed widths and your horizontal scroll issue disappears. I use the parent element as a wrapper to maintain a Max Width whenever I want to control and element’s width, unless you want something maintaining a consistent size (such as how you have specified a fixed width for Div Block 54, which works just fine as it is much smaller than a desktop viewport can be).