Jump to content

Reducing Padding at the TOP + BOTTOM of my logo (mobile view)

Recommended Posts

  • Replies 9
  • Created
  • Last Reply

Top Posters In This Topic

  • 2 weeks later...

The image file that you've uploaded for the logo has a lot of vertical white space above and below the logo (as highlighted by the checkerboard below):

image.png.f2358bf07dae0c45aeb08a9ba6a56f9a.png

If you edit the image file to remove the space above and below the logo, this will reduce the padding in the header.

Was this post helpful? Please give feedback by clicking an icon below  ⬇️

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment
7 hours ago, paul2009 said:

The image file that you've uploaded for the logo has a lot of vertical white space above and below the logo (as highlighted by the checkerboard below):

image.png.f2358bf07dae0c45aeb08a9ba6a56f9a.png

If you edit the image file to remove the space above and below the logo, this will reduce the padding in the header.

Was this post helpful? Please give feedback by clicking an icon below  ⬇️

Very good point. I tried but it reduces the space on the Desktop + iPad view... but not on mobile view 😞 
Is there a CSS code to fix this ?

Link to comment
9 minutes ago, elsapapa said:

I tried but it reduces the space on the Desktop + iPad view... but not on mobile view

There's a Logo Width setting in Site Styles that is specific to Mobile: Branding. If you reduce this from 150px, even though the logo is quite tall (it appears square), this should reduce the height of the header. 

image.png.4d7b9280c98f480241ad7eff77295d33.png

There's only 16px of vertical padding outside the logo so this isn't having much of an effect.

image.thumb.png.feafe49a4fd8e18932ae2a7747296360.png

Did this help? Please give feedback by clicking an icon below  ⬇️

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment
10 minutes ago, paul2009 said:

There's a Logo Width setting in Site Styles that is specific to Mobile: Branding. If you reduce this from 150px, even though the logo is quite tall (it appears square), this should reduce the height of the header. 

image.png.4d7b9280c98f480241ad7eff77295d33.png

There's only 16px of vertical padding outside the logo so this isn't having much of an effect.

image.thumb.png.feafe49a4fd8e18932ae2a7747296360.png

Did this help? Please give feedback by clicking an icon below  ⬇️

Thank you, yes I've tried this before... It doesn't make much of a change. I guess it is just the shape of the logo? And won't be able to reduce the padding?

Link to comment

The padding isn't the issue - it's the space within the image. If you don't want to crop the image file, you could achieve the same effect by adding some negative margin like this:

.Mobile-bar-branding-logo {
  margin: -20px 0!important;
}

image.png.224febbc1ea7ff06e2c9bd7f9f40b971.png

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment
16 hours ago, paul2009 said:

The padding isn't the issue - it's the space within the image. If you don't want to crop the image file, you could achieve the same effect by adding some negative margin like this:

.Mobile-bar-branding-logo {
  margin: -20px 0!important;
}

image.png.224febbc1ea7ff06e2c9bd7f9f40b971.png

Thank you, I have managed something with your help!

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...

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.