Prevent images from resizing on mobile

Hi there - I see a few posts like this but can't figure out what code to add to prevent images from resizing on mobile view. Can someone help me? I am not sure what the 'class' of image is for "your-image-class" in the below code:

@media screen and (max-width: 640px) {
  img.your-image-class {
    width: 100%; /* Adjusts image width to 100% of the container */
    height: auto; /* Keeps the aspect ratio intact */
  }
}

Anyone have any guidance? 

Hi,

Each case will require a different image class name. If you share link to page where you have problem, we can help easier

I am struggling with the same issue. www.therutlader.com - the second image (Bike Reg) in mobile view is stretching the page, I am trying to get it to roughly half the size.

10 hours ago, JWSKS said:

I am struggling with the same issue. www.therutlader.com - the second image (Bike Reg) in mobile view is stretching the page, I am trying to get it to roughly half the size.

You can use a CSS code like this to Website > Website Tools > Custom CSS

@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1654723628836_4556 {
    max-width: 100px;
    margin: 0 auto;
}
}

Absolutely! Replace "your-image-class" with the actual class of your images in Squarespace (e.g., sqs-block-image). This code will prevent resizing on mobile.

Thank you @tuanphan! Much appreciated. 

Hi there @milanifloyd - Can you help with with something similar?
On this homepage: https://www.downtonshabby.com/

I want the image of the woman on the beach to not squish her in half on mobile. It could show the top of the image though, doesn't have to be the whole thing.  Can you assist?

This is what I tried: 

 

@media screen and (max-width: 767px) {
  div#yui_3_17_2_1_1726248927545_73.fe-block.fe-block-yui_3_17_2_1_1714519856839_15921 {
    width: 100%; /* Adjusts image width to 100% of the container */
    height: auto; /* Keeps the aspect ratio intact */
  }
}