Jump to content

Add space to vertically stacked content on mobile

Go to solution Solved by tuanphan,

Recommended Posts

Site URL: https://compass-pilates.squarespace.com/

I have a spacing issue on mobile that I would like to try and fix, I will try and explain.

On desktop I have a container that has 3 columns of matching content (image/text box/button). There's a screenshot attached.
When they stack on mobile they seem too close together so I would like to add space after the buttons so the next block of content is more clearly defined...is there a way to do this? 

https://compass-pilates.squarespace.com/
pa33word

Cheers.
Claire


@tuanphan

Screen Shot 2020-07-15 at 8.13.53 PM.png

Link to comment
  • Replies 12
  • Created
  • Last Reply

Top Posters In This Topic

  • Solution

Add to Home > Design > Custom CSS

@media screen and (max-width:640px) {
div#page-5deeba7799d5d037ef46f2d4>.row:nth-child(2) .span-4:nth-child(2) {
    margin-top: 30px;
    margin-bottom: 30px;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

I would like to add space in the same way on mobile.

What would I replace this with for my site?  div#page-5deeba7799d5d037ef46f2d4>.row:nth-child(2) .span-4:nth-child(2)  

I see that that is specific for Claire's site, but I don't know how to identify it on mine.

Thank you!

Link to comment
On 7/21/2020 at 4:33 AM, jjjuliejj said:

I would like to add space in the same way on mobile.

What would I replace this with for my site?  div#page-5deeba7799d5d037ef46f2d4>.row:nth-child(2) .span-4:nth-child(2)  

I see that that is specific for Claire's site, but I don't know how to identify it on mine.

Thank you!

Can you share link? We can check easier.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 5 months later...
On 1/8/2021 at 9:06 AM, Jniksa said:

Having the same issue. Any help adding additional space between the Services would be greatly appreciated: https://chicory-avocado-mrrd.squarespace.com/our-services

password is Capstone

Thanks!

Hi. Which services? Can you take a screenshot, we can help easier

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Hi. Here's the screenshot. When the two columns stack on mobile the services that are next to each other stack without space between them. The Services affected are: Investment Management and Tax Planning; and Retirement Planning and Education Planning.

Screenshot is attached. Thanks!

Jessica

Services_Page.PNG

Link to comment
On 1/11/2021 at 2:33 AM, Jniksa said:

Hi. Here's the screenshot. When the two columns stack on mobile the services that are next to each other stack without space between them. The Services affected are: Investment Management and Tax Planning; and Retirement Planning and Education Planning.

Screenshot is attached. Thanks!

Jessica

Services_Page.PNG

Add to Design > Custom CSS

/* services padding */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1608572756817_38462 {
    margin-bottom: 40px;
}
div#block-64aadf6adb2c4c1b8c04+.row .html-block {
    margin-bottom: 40px;
}
div#block-6c94b899059e2debd99a {
    margin-top: 40px;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 1 year later...
On 3/23/2022 at 11:27 AM, LAUser said:

If I want to add space above the "Bloom" text on the first section on mobile, so I can see the face of the illustration in the background, which code should I use?

www.iatitheater.org/home-3

Add to Design > Custom CSS

@media screen and (max-width:767px) {
div#block-2d0e6a8c5d12e8c9d246 {
    margin-top: 50px;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.