Rafida Posted April 11, 2020 Share Posted April 11, 2020 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
tuanphan Posted April 12, 2020 Share Posted April 12, 2020 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 How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Rafida Posted April 12, 2020 Author Share Posted April 12, 2020 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 Link to comment
tuanphan Posted April 13, 2020 Share Posted April 13, 2020 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 How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Rafida Posted April 13, 2020 Author Share Posted April 13, 2020 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? Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.