As you can see, when viewing on a mobile device, there is a large white space to the right of the main body. I cannot figure out what element on the page is creating this white space. Can anyone help me?
Hi @moserrw and @SPI Thanks for the tip @SPI, setting the body to overflow hidden will certainly fix the overflow when on mobile portrait, but it will also prevent the user from scrolling down on the page.
When taking a look at the site in Read-Only mode, on the mobile portrait view, it seems that the Hero Heading class is causing the overflow, due to a combination of the font size, line-height and text spacing styles.
One suggestion I would have, is to reduce the font stylings in the Hero Heading on mobile view to fit within the mobile viewport, that way, the overflow will be fixed, and you do not need to set overflow hidden on the whole page.
Take a peek at some styling on the mobile portrait view, on the Hero Heading class, that for me, seems to correct the overflow