Jump to content

Gallery block in footer appearing too large on mobile

Recommended Posts

On 2/11/2022 at 7:49 PM, ibsellar said:

Site URL: https://www.herbfarmacy.com/

The payment images/icons in the footer of our clients website appear too small on desktop but appear huge on mobile. Is there a way to update the size on mobile? Think it may need custom code.

 

Thanks

Screenshot 2022-02-11 at 12.49.07.png

Screenshot 2022-02-11 at 12.49.19.png

Try adding to Home > Design > Custom Css

@media screen and (max-width: 640px) {
#block-yui_3_17_2_1_1622190213781_14818 .sqs-gallery-design-grid-slide {
  width: 20% !important
  }
  #block-yui_3_17_2_1_1622190213781_14818 .sqs-gallery-design-grid-slide  img {
    width: 100% !important;
    height: auto !important;
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    left: 0 !important;
  }
  
  
  #block-yui_3_17_2_1_1622190213781_14818 .image-slide-anchor {
    padding-bottom: 130%;
  }

Let me know how it works on your site

Support me by pressing 👍 if this useful for you

Edited by bangank36
Update to get the right: aspect ratio

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 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

My testing

image.png.f22556d5ed0f6635e057b0f54d76a33e.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 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
4 hours ago, ibsellar said:

Thank you that's great and works. However they are now squashed and out of proportion, is there a way of rectifying this?

 

Thanks

I've just update my previous code, kindly try and check if it works properly

This  is my testing

image.png.b4b5a72f524dd99020bfbd0b28ab3d5d.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 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
  • 2 weeks later...
  • 3 weeks later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • 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.