BRINE TEMPLATE: Restrict image block size on mobile

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!

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

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

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?

Unfortunately still the same issue. I tried it on different mobiles and different mobile browsers, but still shows up as the screenshot above displays. Any idea what the issue may be?