Jump to content

How To Reduce Size (width) of Spacer Block, without changing position

Recommended Posts

Site URL: http://hilarybeckwith.com/

Hello - I would like to reduce the width of a spacer block placed between two text blocks (in order to bring the two texts closer together).

I used to have them displayed as a list, but I did not like the lack of customizing options for the text, so I switched to text blocks, with backgrounds to look similar to a list. I could not figure out how to add the background color AND give a small gap between the two, so I added a Spacer block, which is now too much space.

How do I reduce the width of this block without compromising the position of it?

 

Screen Shot 2022-06-07 at 7.37.08 PM.png

Link to comment
  • Replies 2
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

Try adding this to Design > Custom CSS

 

section[data-section-id="629fee9786f2465d7d8c6dc0"]
    .row.sqs-row:first-child{
        display: flex;
		justify-content: center;
	}
	
	//Adding some spacing for the gap, increase spacing as needed
	#block-yui_3_17_2_1_1654648421854_15213{
		margin-right: 3em;
}

	//Removing the spacer, you can also just remove from the editor Im not sure if it will break it or not
	#block-yui_3_17_2_1_1654654334640_5483{
		display: none
}

}
Link to comment
8 hours ago, biplav said:

Try adding this to Design > Custom CSS

 

section[data-section-id="629fee9786f2465d7d8c6dc0"]
    .row.sqs-row:first-child{
        display: flex;
		justify-content: center;
	}
	
	//Adding some spacing for the gap, increase spacing as needed
	#block-yui_3_17_2_1_1654648421854_15213{
		margin-right: 3em;
}

	//Removing the spacer, you can also just remove from the editor Im not sure if it will break it or not
	#block-yui_3_17_2_1_1654654334640_5483{
		display: none
}

}

Thank you, this helped!

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.