Jump to content

Padding Issue in Text Block

Recommended Posts

Hey there,

I created a custom background colour for some text on my services page after not being able to change it through Site Styles. It almost worked, except that the text box is now shifted outside the grid lines of fluid engine. You'll notice how it doesn't line up with the right side of the image above, but protrudes out to the right.

I tried fixing this with padding and it didn't work. (Left side padding worked to shift everything over to the right, but right side padding did not work to shift it back over to the left.)

If anyone provide a solution to this little bug that would be great!

PS, here is the code I used:

{background-color: hsl(30,25%,97%); padding-top: 15px; padding-left:15px; padding-right: 5px}

Screenshot 2022-11-08 154253.jpg

Link to comment
  • Replies 2
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

The issues is because of how you are applying the padding, it's not contained so the padding makes the block bigger, this will have other problems as it pushes content outside the grid system so will look worse on mobile.  Given this design you shouldn't need to use CSS. You could achieve the same look by adding a background to the text block (click on the block, in the pop-up click the pencil edit icon, and then toggle background on, the color can be adjusted in the styles color themes menu). Or by using a auto-layout list section.

Please like and upvote if my comments were useful to you. Thanks!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com/ 
🔌Ghost Squarespace Plugins (Referral link)
Buy me a coffee

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.