Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Site has grey 'gap' on right side on Mobile


AttractiveToast

Question

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

Link to comment

2 answers to this question

Recommended Posts

  • 1

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.

1288705761_ScreenShot2021-02-14at3_25_58PM.png.c522dc51e67d4759fcccec6e427f7f4c.png

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.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 0

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

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...