Jump to content

Site has grey 'gap' on right side on Mobile

Recommended Posts

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
  • Replies 2
  • Views 983
  • Created
  • Last Reply

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 the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

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

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.