Jump to content

Increase Bottom Mobile Padding On Card Image

Recommended Posts

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.

Desktop.png

Mobile Error.jpeg

Link to comment
  • Replies 8
  • Views 987
  • Created
  • Last Reply
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.

Desktop.png

Mobile Error.jpeg

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

image.thumb.png.f0937e48e583e9a36bc684aaa5c6db86.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
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%;
  }
}

image.thumb.png.f0937e48e583e9a36bc684aaa5c6db86.png

Awesome! That's done the trick.

Many thanks Bangank, much appreciated!

Link to comment
  • 2 weeks later...
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

image.thumb.png.09b13d5406080ba77a4fea0d0fc818bf.png

 

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?image.thumb.png.da3d8bf45f0bb5dbe2f5033949ae2b22.png

image.thumb.png.397168b9ee996907507c971d5270d501.png

Link to comment
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?image.thumb.png.da3d8bf45f0bb5dbe2f5033949ae2b22.png

image.thumb.png.397168b9ee996907507c971d5270d501.png

Hi. Which page?

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

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.