Jump to content

Reducing section height/padding in footer

Recommended Posts

Site URL: https://accordion-jaguar-tztz.squarespace.com/config/

Hi, I'd like to reduce to amount of empty space on my footer, on both the desktop and mobile versions. At the moment, I have the 'section height' as S, but it still isn't enough; there's just too much blank space. I'd like to make it a little more compact.

How do I do this? Can the padding of the logo image I have be reduced also on the mobile version, so that the email/LinkedIn/IG hyperlinks aren't so far away?

I've attached pictures to show how I'd like to edit it. If there is a custom CSS I can add, and you are able to help me write a code for this, I can play around with the specific dimensions myself. 

Password for site: ost

Mobile:

image.thumb.jpeg.5266701f8250f47945c319f61a956ea9.jpeg

Desktop:

image.thumb.jpeg.179be0821e6eb3fbdd3be84637ac0d23.jpeg

Many thanks for your help! 

Tomm

Link to comment
  • Replies 4
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

6 hours ago, tommmmusic said:

Site URL: https://accordion-jaguar-tztz.squarespace.com/config/

Hi, I'd like to reduce to amount of empty space on my footer, on both the desktop and mobile versions. At the moment, I have the 'section height' as S, but it still isn't enough; there's just too much blank space. I'd like to make it a little more compact.

How do I do this? Can the padding of the logo image I have be reduced also on the mobile version, so that the email/LinkedIn/IG hyperlinks aren't so far away?

I've attached pictures to show how I'd like to edit it. If there is a custom CSS I can add, and you are able to help me write a code for this, I can play around with the specific dimensions myself. 

Password for site: ost

Mobile:

image.thumb.jpeg.5266701f8250f47945c319f61a956ea9.jpeg

Desktop:

image.thumb.jpeg.179be0821e6eb3fbdd3be84637ac0d23.jpeg

Many thanks for your help! 

Tomm

You can try this for desktop

section[data-section-id="6286eb28dbe86160588fe0a3"] .content-wrapper {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

section[data-section-id="6286eb28dbe86160588fe0a3"] {
  min-height: 15vh !important
}

Let me know how it works on your site

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

Hey @bangank36, thanks for your help! I tried your CSS, thank you. 

For desktop, the space below the tomm icon is good (I changed it to 17vh), but the space above is a bit too much, looks imbalanced. Is that possible to change to something like this, ie removing the red section?

image.thumb.jpeg.ef0075ea50a7bcd1fae1d864c02a5963.jpeg

Many thanks again!

Tomm

Link to comment

You can try using the additional code

section[data-section-id="6264cd7cf119917020f755a0"] .section-background {
  bottom: 0  !important;
}

 

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

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.