Jump to content

BRINE TEMPLATE: Restrict image block size on mobile

Recommended Posts

Site URL: https://stingray-cylinder-zztm.squarespace.com/

Hey!

In many locations on our website using the BRINE template, we use images blocks to display icons. 

They look fine when viewing the website on a PC, but on mobile the icons looks HUGE.

One example is the orange play button at the top of our home page.
Can this be fixed with code by restricted the maximum size of these images?

https://stingray-cylinder-zztm.squarespace.com

Pass: temp123

Kind regards!

Link to comment
  • Replies 4
  • Views 463
  • Created
  • Last Reply

With play button, add to Home > Design > Custom CSS

@media screen and (max-width:640px) {
div#block-yui_3_17_2_1_1582942238936_6303 img {
    width: 30% !important;
    height: auto !important;
    transform: translateX(-50%);
    left: 50% !important;
}
div#block-yui_3_17_2_1_1582942238936_6303 .image-block-wrapper {
    padding-bottom: 50% !important;
}
}

 

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

Thanks a lot for the help!

- It works great when viewing 'mobile' view on my PC, but when I open the website on my actual mobile, the image is cut off (please see screenshot).

- Can I ask, how would I apply this same code for other image blocks on other pages?

Kind regards

IMG_2361.PNG

Link to comment
13 hours ago, Rafida said:

Thanks a lot for the help!

- It works great when viewing 'mobile' view on my PC, but when I open the website on my actual mobile, the image is cut off (please see screenshot).

- Can I ask, how would I apply this same code for other image blocks on other pages?

Kind regards

 

Seems fine here. Did you solve?

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.