Controlling image icon sizes on mobile. Completely lost, I've tried all the steps I can find on here.

Site URL: https://therobertpaulgroup.squarespace.com/home

On the Services section on https://therobertpaulgroup.squarespace.com/home, I am having trouble scaling the icon images on mobile. They look fine on desktop (below) but I cannot figure out how to retain a max width on mobile. 

Below are mobile (horiz) and mobile (vert)

I am attempting to mimic the styling seen on The Markam Group, which retains scale and position across desktop and mobile: 
https://www.markhamgroup.com/services/

So far I've tried the following code (with proper block codes) with no success. 

/* mobile screens */
@media only screen and (max-width: 640px) {
  #block-unique-ID{
  width: 50%;
  }
}

/* tablet screens */
@media only screen and (max-width: 768px) {
  #block-unique-ID{
  width: 100%;
  }
}

Any help is greatly appreciated!

Above code should work. Did you target correct ID? Or use this CSS, it will target 8 icons

@media screen and (max-width:640px) {
div#block-1dda138206e1344d38fe + .row .image-block {
    width: 30%;
}}

8 hours ago, tuanphan said:

Above code should work. Did you target correct ID? Or use this CSS, it will target 8 icons

@media screen and (max-width:640px) {
div#block-1dda138206e1344d38fe + .row .image-block {
    width: 30%;
}}

 

I really appreciate that. This had it working for a second, but then I moved a block around and now I can't figure out the block ID. Using SS Block ID extension in Chrome, and I've gone through every one from top to bottom, replacing the block in the code above.

Bumping up. I still have not been able to figure this out. Anybody have any other suggestions?

@media screen and (max-width:767px) {
div#page-section-5efd0f6bbb54e267c6bc70d1 .image-block {
    width: 30% !important;
}
}

That worked! Thank you! The icons still stack above their respective text block, though. Do you have any suggestion on how to retain positioning *and* scaling, like seen in the examples below? 

Desktop: 

Tablet:

Mobile:

 



The only workaround I can think of is replacing the whole image & text blocks with flattened image blocks that contain rasterized text. Not ideal at all, but it's really the only way I can think of keeping it all homogenous. 

Hi. I see you solved. Do you still need help on this?

6 hours ago, tuanphan said:

Hi. I see you solved. Do you still need help on this?

The solution is only somewhat temporary. I created the "Services" blocks as flattened images, but I would really love to utilize responsive text. Do you think it's even possible on Squarespace to implement the same responsive functionality as seen on https://www.markhamgroup.com/services/? 

Hi! I'm having similar issues... the top two image blocks (the one that says flora moda and the triptych beneath that) on my home page are not scaling for mobile. I'd like them to scale down to fit on mobile. my site is floramoda.co  password:flowers Thanks in advance for any help!

7 hours ago, DruH said:

Hi! I'm having similar issues... the top two image blocks (the one that says flora moda and the triptych beneath that) on my home page are not scaling for mobile. I'd like them to scale down to fit on mobile. my site is floramoda.co  password:flowers Thanks in advance for any help!

Add to Home > Design > Custom CSS

/* resize mobile image */
@media screen and (max-width:767px) {
.homepage #page section:first-child {
    min-height: 20vh !important;
}
.homepage #page section:nth-child(2) {
    min-height: 30vh;
}
}

thank you so much!!!

13 hours ago, DruH said:

thank you so much!!!

 

 

Do you want to center this image on mobile?