I’ve read through the various bug reports on horizontal scrolling and can’t actually seem solve or even identify the issue I am having.
As you can see in the loom video on page load my header overflows which initially I thought was the issue but then when scrolling further down the page when I get to the card sections which use CSS Grid at some point the page seems to snap back to 100% width and resolve the issue.
I’ve searched through both those card sections in the bricks builder to try identify what could be causing this but I am not winning. I am wondering if this is the issue and it’s not related to something with the mobile header as you can also see I am having some issues with the mobile toggle as it’s sitting below the page sections however in the editor it’s displaying correctly
I’ve now spent about 3 hours trying to figure this out and tried various solutions based on forum posts but just can’t seem to solve these issues. I have added the live URL above to hopefully help in identifying the issue so I can get this fixed as this site is currently live
I have disabled the header template and can confirm it’s not related to the horizontal scroll. I also went and excluded the 2 grid sections on mobile which seems to have solved the horizontal scroll issue.
So I think the issue is with both these CSS Grid sections
@media only screen and (max-width: 768px) {
html {
scroll-padding-top: 20px;
}
#brxe-oqtykp, #brxe-xeqwwu {
display: none !important;
}
}
You searched for the error for 3 hours and didn’t even scroll down?
I would recommend that you create classes for this, then you don’t have to adapt every single card
Thanks @timmse the max-height makes total sense now to why it’s kicking out the layout. I’ll also defintely look into creating classes for the cards as that would also simplify my life big time.
