Page Shift for 1 out of 5 of My Pages <SOLVED>

Community resources General
1

https://preview.webflow.com/preview/tranzotica-site-3?utm_medium=preview_link&utm_source=designer&utm_content=tranzotica-site-3&preview=dcb67b4b523b051ea4ed8f3edb000f7c&pageId=66443e5262ec68e54f929eb0&workflow=preview

Hello All…

This is a small issue but one that kind of bugs me: and that is a page shift for the “About” page on my 5 page site. The other 4 pages align with one another nicely, but the “About” page has a slight shift to the right. I cannot seem to locate the culprit bit of styling that’s doing this.

I appreciate you taking a look and giving your opinion or advice. Thanks in advance.

~Bobby

2

Hi Bobby it’s in the nav on all of your pages I think.

In general I avoid negative margins except in very specific, controlled cases, they can cause a lot of layout issues like the one you’re seeing.

image
image1920×919 91.6 KB

3

https://preview.webflow.com/preview/tranzotica-site-3?utm_medium=preview_link&utm_source=designer&utm_content=tranzotica-site-3&preview=dcb67b4b523b051ea4ed8f3edb000f7c&workflow=preview

Thank you Michael for that find… I went ahead and removed the negative margins from the Nav Menu per your advice… unfortunately it did not remedy the issue…

this is not something I’m losing sleep over but it catches my eye each time I menu through my pages… 4 out of 5 pages align nicely… but the About page has a tiny shift to the right…

I’ll try to take a deeper dive and keep in mind your personal decision to use negative margins sparingly.

~Bobby

4

Nice fix, that was actually creating a significant horizontal scroll issue and nav truncation in Chrome.

I don’t see any page shift issue now, the about page looks centered on all breakpoints ( using desktop Chrome ). Switching between pages, your hero branding is aligned. If you’re still seeing something, maybe a screenshot or video will help.

image
image1039×2408 132 KB

5

https://preview.webflow.com/preview/tranzotica-site-3?utm_medium=preview_link&utm_source=designer&utm_content=tranzotica-site-3&preview=dcb67b4b523b051ea4ed8f3edb000f7c&pageId=66443e6a9c1174687b21be3d&workflow=preview

so this was interesting… I compared my Body parameters of all my pages… especially the Contact page and the About page… the About page is the shortest page of the 5 in length (1500 px)… so I decided to match the length of it to the Contact page (1750 px) and that fixed the issue… I experimented around for a bit with the page and 1600 px turned out to be the shortest length to keep the “shift” from returning… somehow the 1500 px length of that particular page was the problem… so now all 5 pages align nicely.

thanks in general to any and all of you for being a part of this resource.

cheers!
~Bobby

6

thank you for this follow up… the negative margin removal didn’t seem to do the trick here on my end… but my last comment described what did… I am very grateful for your help… cheers mate!

1 Like