Increase Bottom Mobile Padding On Card Image

Site URL: https://www.boombattlebar.co.uk/

Hello,

I'm having some trouble with mobile padding on my website. As you can see from the images the desktop version looks good, but on the mobile version, the card image is too tight to the text box. I'd like to increase the gap between them but not effect desktop (Illustrated by red arrows).

I've tried multiple CSS Codes but I can only seem to effect the padding around the whole card including text box...

Could anyone please advise?

Many Thanks, Ben.

On 1/9/2021 at 1:34 AM, BenCLKE said:

Site URL: https://www.boombattlebar.co.uk/

Hello,

I'm having some trouble with mobile padding on my website. As you can see from the images the desktop version looks good, but on the mobile version, the card image is too tight to the text box. I'd like to increase the gap between them but not effect desktop (Illustrated by red arrows).

I've tried multiple CSS Codes but I can only seem to effect the padding around the whole card including text box...

Could anyone please advise?

Many Thanks, Ben.

Add this to Design->Custom CSS
 

@media only screen and (max-width: 460px) {
  .sqs-block-image .image-block-outer-wrapper.image-block-v2 .image-card {
    margin-top: 5%;
  }
}

12 hours ago, bangank36 said:

Add this to Design->Custom CSS
 

@media only screen and (max-width: 460px) {
  .sqs-block-image .image-block-outer-wrapper.image-block-v2 .image-card {
    margin-top: 5%;
  }
}

Awesome! That's done the trick.

Many thanks Bangank, much appreciated!

@BenCLKE I see mobile header is not transparent. Do you want to make mobile same has header (same transparent)?

Also, this page on tablet look good. (phone number)

https://www.boombattlebar.co.uk/bars

On 1/12/2021 at 10:07 AM, tuanphan said:

@BenCLKE I see mobile header is not transparent. Do you want to make mobile same has header (same transparent)?

Also, this page on tablet look good. (phone number)

https://www.boombattlebar.co.uk/bars

 

Hi Tuan, I don't quite follow with the header? Do you mean getting the video on mobile too? :)

On 1/12/2021 at 10:07 AM, tuanphan said:

@BenCLKE I see mobile header is not transparent. Do you want to make mobile same has header (same transparent)?

Also, this page on tablet look good. (phone number)

https://www.boombattlebar.co.uk/bars

 

I also have another issue, not sure if you can help? I have a Grid Gallery that isn't scaling properly on mobile - I'd like it to have 2 columns and fit the screen on mobile - any ideas?

On 1/22/2021 at 5:04 PM, BenCLKE said:

I also have another issue, not sure if you can help? I have a Grid Gallery that isn't scaling properly on mobile - I'd like it to have 2 columns and fit the screen on mobile - any ideas?

Hi. Which page?

On 1/23/2021 at 3:05 PM, tuanphan said:

Hi. Which page?

It's the Book Now page mate. https://www.boombattlebar.co.uk/booknow

On 1/23/2021 at 3:05 PM, tuanphan said:

Hi. Which page?

Hi Tuan, 

Did you get chance to take a look? I'm struggling to fix this one 🙂

It's the Book Now page mate. https://www.boombattlebar.co.uk/booknow