Site has grey 'gap' on right side on Mobile

Site URL: https://www.outbrnd.com/

Hey guys,

I'm having some weird issue of sorts where on mobile (I'm checking using a Note 10+ and an iPhone Xs, but it's also visible on emulator), the site has a weird 'empty space' - for lack of a better way to describe it- on the entire right side of the screen.

At first I didn't notice this, but then I saw that I could scroll from left to right on the site - so I zoomed out and then saw the gap.

I'm not too sure what's causing this, and if I remove all of my CSS, the gap is still there.... so I don't know how I did this.

Site name: Outbrnd.com (no password needed)

Could someone help with this?

Thanks,
T

I don't have a solution but one thing I noticed is that your CSS is contributing to the issue somewhat. Turn it all off again. Then set the max height for the logo to 60px instead of 67.

The problem went away for me.

Part of the problem at 67 is that it is all crammed in there and it appears the right padding for the mobile logo image is 50px getting pushed outside the viewport.

Hey @creedon, thanks!

When I read over what you said, I realized what part of the CSS might be causing an issue - I used padding to move the logo slightly to the right as I felt it was a bit too close to the burger icon.

When I removed the CSS and changed the max-height to 60px, it didn't fix it completely, so I also changed my CSS a bit to solve the issue. It's not perfect, but here it is:

// Move logo just a smidge //
.header-mobile-logo{
  padding-left: 25px !important;
}
// slightly resize logo in mobile //
@media screen and (max-width:640px) {
.header-mobile-logo img {
max-height: 50px !important;
}
}

On that note, problem solved!

Thanks a lot!
T