Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
Rafida

BRINE TEMPLATE: Restrict image block size on mobile

Question

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!

Share this post


Link to post

4 answers to this question

Recommended Posts

  • 0

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

 


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Armadillo - Free portfolio template

Share this post


Link to post
  • 0
Posted (edited)

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

Edited by Rafida

Share this post


Link to post
  • 0
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?


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Armadillo - Free portfolio template

Share this post


Link to post
  • 0

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?

Share this post


Link to post

Create an account or sign in to comment

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


×
×
  • Create New...