Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Add space to vertically stacked content on mobile


Claire_auck
Go to solution Solved by tuanphan,

Question

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 post
  • Answers 10
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Posted Images

10 answers to this question

Recommended Posts

  • 0

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

 

Link to post
  • 0

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 post
  • 0
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.

Link to post
  • 0

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?

Link to post
  • 0
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

Link to post
  • 0

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 post
  • 0
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;
}
}

 

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...