Jump to content

How to add padding on MOBILE view only

Go to solution Solved by Ziggy,

Recommended Posts

  • Solution
8 hours ago, KatieLL said:

For some reason on the desktop versions the padding is great. But on mobile the spacing disappears and I don't like how tight the text blocks are to the border of the box. Advice will be appreciated!

The reason is that on the desktop layout you have 24 columns and you are leaving blank columns and rows to act as padding, but on the mobile layout where you have 8 columns to use, you are not leaving any gaps. 

One solution would be to leave a blank column on the left and right, but that will narrow the text significantly.

Another solution would be to drag the "background" shape the full width of the screen on mobile so giving you some padding for the text.

You could use CSS, but only if you're comfortable with using it and keeping it up-to-date.

This would work as a start:

#block-57bfa4493feed0a6fa35, #block-yui_3_17_2_1_1683653009628_23651 {
  .sqs-block-content {
    padding:0 20px;
  }
}

If you need to do this to more blocks, then you may want to find more ID blocks, this method works well:

https://squarefortytwo.com/squarespace-guides/find-an-id-in-squarespace-71

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
13 hours ago, Ziggy said:

The reason is that on the desktop layout you have 24 columns and you are leaving blank columns and rows to act as padding, but on the mobile layout where you have 8 columns to use, you are not leaving any gaps. 

One solution would be to leave a blank column on the left and right, but that will narrow the text significantly.

Another solution would be to drag the "background" shape the full width of the screen on mobile so giving you some padding for the text.

You could use CSS, but only if you're comfortable with using it and keeping it up-to-date.

This would work as a start:

#block-57bfa4493feed0a6fa35, #block-yui_3_17_2_1_1683653009628_23651 {
  .sqs-block-content {
    padding:0 20px;
  }
}

If you need to do this to more blocks, then you may want to find more ID blocks, this method works well:

https://squarefortytwo.com/squarespace-guides/find-an-id-in-squarespace-71

 

It worked! Thanks so much! The code is great! 🙌

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.