Inconsistencies on edit mode, preview mode and published site!

Hey guys, could someone help me out?

There is something wrong with the spacing of the elements and the spacing of the background image on my site.

It keeps changing positions and i dont know why.

Here is my read only link

This is the published site

Besides the text changing positions, the background image on mobile is not in the position it should be based on what it looks like on the designer,

If the kind soul who helps me out checks the published site on mobile they will notice the difference.

it should be pretty easy to spot what i’m talking about.

Thanks in advance!

I think I see what you mean, I have noticed this too. Since the designer is always smaller than a fresh window, depending on spacing settings (especially when using percentage values) your spacing will change because the size of the window has changed. This is just how spacing on the web works.

You can offset your issue on mobile by using more precise positioning with your background image here:

Hope I have helped

1 Like

Hey @161creativedesign , thanks for the reply!

I actually have been trying to adjust the background image through the position settings panel you pointed out, the issue is what i set on the designer looks different than what im seeing on the published site, so whatever position i try to set it just does not look the same .

Also, there is something wrong with the drop NavMenu apart besides the desktop version, maybe you’re able to know whats wrong?

Thanks in advance for the time you set aside trying to help me out and for anyone that sees this topic, any help is appreciated!

Hello again,

In regards to background image positioning, the difference in positioning you’re seeing is due to the combination of 1-the positioning of the background image using that panel & 2-the browser window. For example if you left align the background image by selecting the arrow pointing directly left, you will see more or less of the image on that published site depending how long (horizontal) that div is. This is just how positioning images works when using background images. You cannot guarantee that the user will see the same thing you are seeing unless they are using your machine. Sorry for if this is hard to understand, I may not be saying it in the most direct way.

Regarding the drop nav, please further explain because to me, the full nav appears on desktop sites & the hamburger menu displays on mobile. I’m just unsure of what you want to accomplish.

****Just in case this helps, you can change at what breakpoint elements appear by first selecting that element (ex. NavBar) and going to the setting panel (gear icon). You’ll find this option at the top with little images of each breakpoint.


Hey @161creativedesign!!

I finally understood what you meant and fixed the background issue!!

I also realized that what was happening on the NavBar was a mistake from my part, and i also fixed it!1

Thanks for the help!

1 Like

Very glad we could be of assistance :+1:

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