This website looks conjested when published but normal in the design editor

Design help General
1

In the mobile layout on my contact page, it looks normal in the editor but when I publish the site, all of the contents are being pushed upward and the rolling into each other.

I have no idea why this is happening if someone can please help!

Thank you.

Contact Us – Let’s Create Something Amazing Together

Here is my site Read-Only: Webflow - Seek The Kingdom

2

Hi there!

If your published site looks different from what you see in the Designer, here are several solutions to resolve this:

  1. Unpublish and republish your site from your site settings. You can follow the steps in our publishing guide.

  2. Clear your browser cache:

  • Chrome: Press Ctrl+Shift+Delete (Windows) or Command+Shift+Delete (Mac)
  • Select ‘Cached images and files’
  • Click ‘Clear data’
  • Refresh your published site
  1. If needed, you can restore a previous version of your site from your project settings.

Before publishing, always preview your site across different screen sizes using the Designer’s preview mode and responsive breakpoint settings to ensure consistent layout behavior.

Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.

3

I followed all of these steps but still doesn’t seem to work…

4

Hey @seekthekingdom,

I was checking this site out on my device and it looks accurate on mobile devices, just like shown in the preview mode’s editor. Could you clear cache or try visiting this site on another device / incognito mode to see if you are still facing seeing any issues?

1 Like
5

I checked on mobile and I saw the navigate on mobile is stacking on each other, can you check if you are using position absolute on mobile responsiveness for your navigation ?

7

@musawir_raji All content wrappers are set to static!

8

I deleted the website data in my phone for the website and in incognito the browser is still congested. @AJ_Dev

9

Yeah the navbar can be really tricky on mobile, Webflow has some weird quirks with it.

Since your content wrappers are static, try checking a few other things:

Look at your navbar container itself and see if it has any fixed height set. Sometimes on mobile the navbar height gets calculated wrong and pushes everything up.

Also check if you have any negative margins anywhere in your mobile layout. Those can cause elements to overlap and stack weird.

Another thing to try is looking at your section padding and margins on mobile. Sometimes desktop spacing doesn’t translate well and elements end up too close together.

Oh and check your navbar z-index too. Even if it’s not positioned absolute, if the z-index is messed up it can still cause stacking issues.

One more thing that trips people up is if you have any interactions or animations on the navbar that behave differently on mobile. Those can sometimes cause positioning problems.

Try temporarily hiding the navbar on mobile just to see if that fixes the content stacking. If it does, then you know it’s definitely a navbar issue and you can work backwards from there.

The fact that it looks good in the editor but breaks on publish is classic Webflow mobile weirdness. Usually it’s something small but super annoying to track down

10

Oh, it’s super weird that I am not able to replicate this issue on my end. It still looks good on my end. If you can, please provide a screenshot / short screen recording of how it looks on your end, in case you still face issues after testing out the suggestions shared by the other member here.

11

I couldn’t figure it out but I just changed it and it seems to be working now…