Gallery block padding on mobile

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?

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? 

Thanks in advance!

Add to Page Settings > Advanced > Header

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

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?

23 minutes ago, justin_phang said:

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

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

7 minutes ago, tuanphan said:

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

Thank you so much sir!

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:

The 

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.

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

2 hours ago, tuanphan said:

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

 

Thanks Tuanphan! It's as close as I would like it, thank you so much