▼
Streaming live at 10am (PST)

Content shifting on live site

#1

Hello,

I seem to be having a problem with a discrepancy between the webflow preview and the actual live site (as per attached image). The content shifts when I use the "Home" button and only that link but it previews fine in Webflow so I'm at a bit of a loss. Thanks for any assistance.

Preview.png1437x720 55 KB

p/s: the content doesn't seem to shift on a tablet however the current state of the button itself seems to shift over very slightly.

Here is my public share link: https://preview.webflow.com/preview/sionglewis?preview=d410f3bfccb93e91513373d5aa9e6c97

Live site: http://sionglewis.com

#2

Please provide a link to your live site as well. It will help us help you!

#3

Thanks for the live site link. I don't seem to be experiencing the same issue as you. Have you tried testing your live site on a couple browsers?

Also, I notice your site's fonts "flash" every time you load a page. Perhaps try this trick that keeps the site blank until all fonts are loaded (thought the site will flash white instead - your choice on that tradeoff.

Another approach I recommend you check out is to use a single Tab component on a single Page rather than splitting all your pages up across 6 manually created tabs. Doing this will effectively solve the shifting topbar issue you mention in this post as well!

#4

Hmm...I tried it on Firefox, Safari, and IE. It shifts on all of them, and the navigation bar actually doesn't show up on Safari at all. I'm on a PC running Windows 7; I wonder if that's an issue as the site works on Safari on my iPad.

#5

I looked at your site and I know exactly what your problem is as I have dealt with it previously. Only certain people will ever see it and it is based on resolution of the viewing screen.

In a high resolution your content will not shift because the scroll bar will never appear. In a low resolution (ipad for example) all your pages will have scroll bars and thus not shift.

So you either 1 - ensure the scroll bar is visible on every page (even though it will be grayed out) or 2 - ensure none of the pages scroll (which is not very likely) or 3 - not worry about it!

I hope that this has helped you. If you have any other issues, feel free to send me a message directly.

Happy developing.

dL0

#6

Great. I was just worried that I had messed it up somehow. Thanks for all the help.

closed #7

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.