Remove Image block padding on mobile only

Hi,

my website is www.thecigarbible.com

On the mobile website I want to remove all left, right and top padding on the image blocks containing the text "Newsfeed" and the one with  "Cigar of the month", so that the image block has no padding top, left and right of the mobile screen.

I have tried several different options posted on the forum herea but none seem to work right. I am either left with padding at the top, some small padding either left or right or other content blocks on my website are effected. 

I am using the template: Brine.

I would really appreciate some help.

Did you solve?

• This I got solved thank you for asking..😍

How did you solve it? I'm having the same problem...

7 hours ago, jgeum said:

How did you solve it? I'm having the same problem...

If you share link to your site, I can take a look.

I'm having the same issue.

When mobile converts a column layout into a single thread, it adds padding at the top and bottom of the columns. This being an image block rather than a gallery.

In addition, whilst I'm here. I'd love to reduce the height of the image blocks when on mobile, I can't seem to find the correct code for that.

jonathan.gallagher.squarespace.com/products

pw: jonjonjon

29 minutes ago, JonJonJon said:

 

Your link is invalid. Please check again.

If you don't want to share link here, you can share to my email in signature. 😂

oops sorry, i added a dot in there

jonathangallagher.squarespace.com/products

thanks 🙂

I tried the whole block ID thing, but I can't seem to get it working for the columns beginning and ends.

I would actually have preferred another more irregular grid  layout, but I have found the column structure to be the least of a padding headache across devices.

A solution, at least for Brine. I'm not a CSS person at all, just learning as I try to improve and fix errors/glitches in my site. So feel free to suggest a more refined solution.

the padding value of 0% is if you want images flush against eachother. This will also fix the gap between your first image and the header. This will be a site wide thing for column based image blocks. (Image Layout Pages.. Masonary/Grid)

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

refined it a bit

@media screen and (max-width:640px) {
.sqs-block-image {
padding-bottom: 1% !important;
padding-top: 1% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.sqs-layout .sqs-row .sqs-block:first-child {
    padding-top: 0% !important;
  }
  .sqs-layout .sqs-row .sqs-block:last-child {
  padding-bottom: 2% !important;
  }
  }

this way images span the width, but you have control over the gaps between them, whilst keeping the top image flush to the header. The row% needs to be the value of the top/bottom image padding combined, as the gaps inside the columns are an addition of two paddings, and the gaps between the stacked columns is controlled by the row value.