Add space to vertically stacked content on mobile

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

Thank you sooooo much Tuanphan, it works a treat! Very clever!
 

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!

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.

Facing the same issue, here is the link: www.cruisintikisstaugustine.com/tours

The poster style image blocks all bleed together on mobile in portrait mode. Anyway around this?

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!

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

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

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

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;
}
}

Thanks!

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

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;
}
}