Sections disappear below 430px | Preview does not reflect actual spacing for published site

Hi,

https://www.akroots.com/

I’ve been trying to find a solution to two problems on this site for ages.

  1. Mobile breakpoint adapts perfectly down to 430px. From 429px-320px it then completely rearranges the site, loses all of its spacing and structure, and sections disappear behind other sections. I’ve made a new breakpoint and created new sections (hiding those for breakpoints up the chain) for 429px-320px but…

  2. …the preview of the site has completely different spacing to the actual published site at this breakpoint.

I’m sure there’s an easy fix to these problems, but after a day of work I can’t figure it out.

Any help much appreciated as this is work for a charity!

Many thanks,

Joel

1 Like

Hi @info97662

I see that you are using VH unit of measure.

Due to some limitations Editor X Preview sometimes fails to show the real picture when we use VH.

As the temporary workaround I recommend using Viewport Resize r (Google Chrome extension that helps to preview live sites) . It is helpful when you are using VH for section height.

Preview your site by using this tool. It should show you the issues you need to fix.

Furthermore, in order to take advantage of VH you need to use it in combination with other tools like text scaling for example.

Lastly, if u see that mobile breakpoint got messed up use remove overrides button. It resets the design or layout properties of an element back to the properties of the largest breakpoint. I hope it will help you find the section that disappeared.

If the issue still persists contact customer care here .

Have a good one !

Hi,

Thanks very much for responding @maksymz

I’ve restarted the build process (https://akroots.editorx.io/website) to try and use pixels for sizing rather than VH. All was going well structurally (fonts etc are yet to be dealt with) but all of a sudden the footer appears in the middle of the page on screens below 430px. Please could you help me to understand why this is, and suggest how I might fix it?

Your help is much appreciated in this. Thank you!

Joel

Hi @info97662

Sorry for delay.

I had a look at your site, and it seems like you managed to resolve the issue.

Please share the workaround that you used. Thanks !