Reduce padding on mobile

Inkdave · May 8

Hi All

In the process of building out a homepage and I'm struggling with something I think should be pretty straight forward. I want to be able to control padding of each section on mobile.

I've tried various found code and pasted into css but clearly doing something wrong...

So the first section I would like to adjust is labelled:
section[data-section-id="65b90c8f6fb984655e213dbe"]

Second section is
section[data-section-id="66340409d7dea276bd80b731"]

I've attached pics to show to show spacing I'm trying to adjust. Any help would be greatly appreciated.

Thanks

Ziggy · May 8

Can you share your website URL?

Inkdave · May 8

sure sorry thought I had.

www.studioyoung.co.uk

Ziggy · May 9

The section sizes S M L come with different inbuilt padding linked to the screen width, but you can control it in CSS like this:

section[data-section-id="65b90c8f6fb984655e213dbe"] {
  .content-wrapper {
    margin-top:42px;
    margin-bottom:42px;
  }
}

Or you can target just mobile like this:

@media only screen and (max-width:767px) {
  section[data-section-id="65b90c8f6fb984655e213dbe"] {
    .content-wrapper {
      margin-top:42px;
      margin-bottom:42px;
    }
  }
}

Inkdave · May 9

All sorted. Many thanks for the lesson!

Best

Dave

Ziggy · May 9

1 hour ago, Inkdave said:

All sorted. Many thanks for the lesson

Happy to help

Reduce padding on mobile

Recommended Posts

Inkdave

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

Inkdave

Posted Images

Ziggy

Inkdave

Ziggy

Inkdave

Ziggy

Create an account or sign in to comment

News

Inkdave

Circle Benefits

Events

Circle Day

Resources

Product Updates

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources