Streaming live at 10am (PST)

Additional space on tablet and mobile view

Hi

I have read the posts I can find on this topic and followed their suggestions, however, I still cannot solve the problem, including inserting code into the footer. When looking at the site in tablet or mobile in the view mode there is lots of additional space that should not be there. Any suggestions to fix this would be appreciated!


Here is my site Read-Only: https://preview.webflow.com/preview/gullendah-pastoral-co?utm_medium=preview_link&utm_source=designer&utm_content=gullendah-pastoral-co&preview=f563502a966401a9df4800a1ef9f3cae&mode=preview

you have a symbol at the top of your page titled nav bar section that has a 30 pixel side margins and is set to 100%width so it is going off the side of the page.

Hi DFink,

Thanks so much for your response. I really appreciate it!
I changed this but it has not fixed the issue. Is there something else I can do? Is it not a good idea to set the width to 100%?

I’ve had a quick look and it appears that quite a few of your objects (Symbols, containers etc.) are wider than your page. If I was you I’d duplicate the project and double check all sizes - most items don’t need 100% width applying, just leave them as Auto.

Since its a duplicate of your site you can be brutal and work backwards by deleting objects to check which one is the offending item. Then simply look into how its built - chances are its simply a dimension thats incorrect. Sections, divs etc will fit mobile without having to use 100%.

Hi Connect Creative Des

Thanks so much for your response. I duplicated the project as you suggested and went through each object to check the sizes, margins and widths. Then through a process of elimination and deleting a section at a time I worked out which one was causing the problem. And it’s fixed! Thank you!