Help me understand why the alignment isnt working

Hi everyone,
I’m having an issue with alignment of whole sections on my site… in the preview everything looks fine, but when I publish it and use a mobile landscape it looks terrible… what to do? :safety_vest: guide me through these uncharted waters :heart:

Kind regards,

Luwda


Here is my site Read-Only: Luwdas Site Read-Only
Published site: https://whys-five-star-project.webflow.io/

Hi Ludvig,

Can you share the published site? or a screen cap so we can understand the alignment problem you talk about?

Sorry, forgot to share it ^^

Your sections have width:auto which in some cases makes them wider then the screen.
https://www.loom.com/share/dcd16bcaf1d4422b96439d627644ab9c

(in cases where you have a child element with width:100vw and the section has padding.

Other then that, your ‘Home Section Wrap’ element have margin-left:60px, which makes it off center.
Image%20001

1 Like

Ty for the reply, I’ll try to fix that! I can also mention that I’m a novice at webflow and I’m trying make a new site for the company. So if you have any pointers or tips, see anything that looks weird. feel free to share!

1 Like

Watch out for that horizontal scroll :smiling_imp:

1 Like

Yeah, I have no clue why the horizontal scroll appears :S

You have many elements with no width defined, and large paddings and margins on their children elements (eg. in the Team section)

1 Like

hm, okay… I’m gonna have a look at that, I’ll come back to you if I get stuck! :smiley:

1 Like

damn, I can’t locate the issue that is causing the horizontal scroll… I’ve gone through every section and set the width to 100 vw, set the margin to zero and changed some things to flexbox to arrange everything inside the sections. but the scroll is still there, even in computer landscape :confused:

Place the following code on the head so you can have a visual cue of what’s overflowing and what’s not:

<style>
* {
  border: 1px solid #f00 !important;
}
</style:>
1 Like

It might be the 100vw. Change all 100vw to 100%

1 Like

Also the hero photo element.

1 Like

Okey, so… I’ve changed alot of things, I don’t know exactly what did it… but I solved it (with your help!) Now I just need to keep on making content and try to improve the whole design as I go :blush:

Thank you guys so much, for all of your help! I got to say, this community is amazing :heart:

1 Like