Jump to content

Gallery block padding on mobile

Recommended Posts

Site URL: https://www.justinphang.com/bmw-shortfilm

Hey people,

In my website's mobile view, I would like to have my specific gallery blocks to have zero top padding for the caption, so 'Ad of the day' is sticking right below Adweek and 'editor's pick is right underneath Adage'. Is it possible?

 image.thumb.png.b65765f60bb4c0b8d0cd5f4388a04fe9.png

 

Also, can there be a left and right padding for the images in the gallery block so 'BMW Blog' doesn't touch the edge of the screen? 

 

image.thumb.png.e556fdb43b5678467beb99d7a3ef3a7a.png

 

Thanks in advance!

Learning something new everyday

Link to comment
  • Replies 7
  • Views 320
  • Created
  • Last Reply
On 10/3/2020 at 4:10 PM, tuanphan said:

Add to Page Settings > Advanced > Header


<style>
  @media screen and (max-width:640px) {
  .slide a {
    padding-bottom: 50% !important;
}
  }
</style>

 

Ahh damn, I just realize this requires premium feature. Any way to do this at the generic CSS style tab?

Learning something new everyday

Link to comment
28 minutes ago, tuanphan said:

Personal Plan: Edit Page > Add Code Block > Paste above code

Hmmm, I tried it, but it affect the other gallery block at the bottom too. Any chance I can target it instead? Also, I don't think the block of 'Featured in' is actually affected too. I did a quick mockup, hopefully its possible to get closer to this, if possible:

1146800917_IMG_9518copy.thumb.jpg.f79c881323e0ac65929755abaf2f4295.jpgThe 

The pink lines signify the left and right padding. Whereas the green line signify the padding between the image and the caption. And the blue lines signify the space between each image.

Learning something new everyday

Link to comment

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.