Jump to content

How do I reduce the padding within a social links block (v7.0)

Go to solution Solved by Beyondspace,

Recommended Posts

Site URL: https://www.bigbiology.org/episodexxabout

I want to put text close to my social links to ask visitors to follow or subscribe to our various social platforms. I also want this block to be aligned along the right hand side of the page. Unfortunately, when I right align the social links there is a large white area within the block that separates it from the text. I could left align the social links so they are closer to the text, but the white spacing is still there on the other side. 

The following image better illustrates what I am trying to remove. I'd like to decrease this white space within the Social Links block. (here is a link to see the issue on the webpage (https://www.bigbiology.org/episodexxabout)

image.png.0c2a20b662ae079832cffe16f7c9f9ed.png

 

Edited by Steve_BigBio
Grammatical error on post
Link to comment
  • Solution
55 minutes ago, Steve_BigBio said:

Site URL: https://www.bigbiology.org/episodexxabout

I want to put text close to my social links to ask visitors to follow or subscribe to our various social platforms. I also want this block to be aligned along the right hand side of the page. Unfortunately, when I right align the social links there is a large white area within the block that separates it from the text. I could left align the social links so they are closer to the text, but the white spacing is still there on the other side. 

The following image better illustrates what I am trying to remove. I'd like to decrease this white space within the Social Links block. (here is a link to see the issue on the webpage (https://www.bigbiology.org/episodexxabout)

image.png.0c2a20b662ae079832cffe16f7c9f9ed.png

 

Try adding to Home > Design > Custom Css

#collection-61b2530b7562220092b7b01f  .Main-content .sqs-layout > .row > .span-7 > .row{
  display: flex;
}

#collection-61b2530b7562220092b7b01f  .Main-content .sqs-layout > .row > .span-7 > .row > .span-4 {
  flex: 70%;
}

#collection-61b2530b7562220092b7b01f  .Main-content .sqs-layout > .row > .span-7 > .row > .span-3 {
  flex: 30%;
}

#block-yui_3_17_2_1_1639403585094_17300 {
  padding-right: 0;
}

#block-yui_3_17_2_1_1639076635312_5976 {
  padding: 0 !important;
}
#collection-61b2530b7562220092b7b01f  .sqs-svg-icon--list {
  display: flex;
  justify-content: space-evenly;
}

#collection-61b2530b7562220092b7b01f  .sqs-svg-icon--list a {
  margin-left: 0 !important;
}

Let me know how it works on your site

Hope it makes sense

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, 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.