Jump to content

Image padding on Mobile - Brine Template

Recommended Posts

I need some help fixing extra padding in between two images on Brine when viewing on a mobile device. 

The code I am currently using is: .

@media screen and (max-width: 640px) {
    .homepage .sqs-block.image-block:last-child {
        padding-top: 0 !important;
    }

Although I know this is only targeting the homepage. How can I target my services page (https://www.domaniquejazmindesigns.com/services) as well to get rid of the extra padding in between the two image blocks at the bottom of the page when viewing on mobile?

IMG_7627.jpg

Link to comment
  • Replies 7
  • Views 1.2k
  • Created
  • Last Reply

1. Target Pad ID. https://beaverhero.com/squarespace-how-to/#How_to_Find_Page_ID

2. Remove padding

Add to Home > Design > Custom CSS

@media screen and (max-width:640px) {
div#block-yui_3_17_2_1_1571906209264_4602 {
    padding-bottom: 0 !important;
    padding-top: 0 !important;
}
}

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 1 month later...
  • 2 weeks later...

the padding % value changes how close together they are

 

@media screen and (max-width:640px) {
/* remove absolute */
.sqs-block.image-block {
    padding: relative;
}
.sqs-block.image-block {
  padding: 0%; 
}
.sqs-layout .sqs-row .sqs-block:first-child {
    padding-top: 0px !important;
  padding-bottom: 0px !important;
  }
  .sqs-layout .sqs-row .sqs-block:last-child {
    padding-top: 0px !important;
  padding-bottom: 0px !important;
  }

Link to comment
  • 2 weeks later...

First of all. Thanks a lot for getting back to me. I embedded the code at 0px and it made no difference sad to see. It looks great on desktop (first screen shot) but mobile is terrible (second screen shot). Screen shots below for the first block. 

Appreciate the ongoing support

Padding Issue.PNG

InkedScreenshot 2020-01-16 at 21.01.37_LI.jpg

Link to comment
  • 2 weeks later...

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.