Remove horizontal scroll from mobile

Site URL: https://noahlangphotography.com/blog/how-to-get-enchantment-permits-leavenworth-washington

On a desktop and in the little squarespace mobile window it says that x-overflow is working from the code I applied below until I actually visit the site on a phone and there's clearly still horizontal scrolling. Any idea on what I'm missing ?

body {
    max-width: 100% !important;
    overflow-x: hidden !important;
}

Thanks

Try adding this code

html, body {
	overflow-x:hidden;
}

10 minutes ago, tuanphan said:

Try adding this code

html, body {
	overflow-x:hidden;
}

 

that did it thanks

This code used to work 

html, body {
  overflow-x: hidden !important;
  max-width: 100% !important;
}

but now it only works some of the time on mobile blog pages. See this one for example. In some browsers the overflow is hidden and for some it isn't but only on blog pages.

https://noahlangphotography.com/blog/lualualei-lookout-trail-oahu-hawaii

On 6/17/2023 at 11:04 AM, noahawaii said:

This code used to work 

html, body {
  overflow-x: hidden !important;
  max-width: 100% !important;
}

but now it only works some of the time on mobile blog pages. See this one for example. In some browsers the overflow is hidden and for some it isn't but only on blog pages.

https://noahlangphotography.com/blog/lualualei-lookout-trail-oahu-hawaii

You try disable code in Code Injection and check again

7 hours ago, tuanphan said:

You try disable code in Code Injection and check again

I've narrowed down the issue to pages with these product widgets, which I need on my website, but I'm struggling to figure out exactly what's overriding the CSS to see how to prevent it.

<script type="text/javascript" src="//www.avantlink.com/product_ad_widget/paw.php?pawid=168457&amp;pw=302869&amp;output=js"></script> 

That link above is one of those with the product widget.

This is the closest I've gotten but it's not a solution because it applies to everything. Even the header. 

* {
    overflow-x: hidden !important;
    max-width: 100% !important;
}

However, this should work, but it doesn't 

* section[data-section-id="63e6a2ba7302361813434e9f"] {
    overflow-x: hidden !important;
    max-width: 100% !important;
}

I fixed it. Took forever. Their widgets are terrible. If anyone else has this issue message me on my website, and I'll send the solution.

https://noahlangphotography.com/contact

I have spoken to support and they mentioned some code in the code injection was making this happen. I have already cleared and checked every code possible and yet this problem persists on android and iphone devices. Is there anyone who can help me?

www.ericjasondsouza.com
password: Reflection9876!

You can remove this section & try again (remember to duplicate the page, just for backup, before removing section)