Stop Image Resize on Mobile

Site URL: https://www.ourmanagement.com

Hi,

I am having troubles in my square space site. In short on my main page I have images on the 'how it works' section which look great in desktop but when re-sized to mobile they get way to big. So far as a hack I've exported the image as 142px by 142px but the quality of the image looks bad. Any way of doing this css?

Cheers,

K

I see you fixed?

@tuanphanSorry for late reply, for some reason didn't get an email notification.

To answer your question no, I didn't fix it. I instead exported the photo to a lower resolution ie 140px x140px so it woudn't expand. The issue with this it looks like crap. Any suggestions on how to maintain the same width and height even on mobile?

1 hour ago, katech said:

@tuanphanSorry for late reply, for some reason didn't get an email notification.

To answer your question no, I didn't fix it. I instead exported the photo to a lower resolution ie 140px x140px so it woudn't expand. The issue with this it looks like crap. Any suggestions on how to maintain the same width and height even on mobile?

You can replace 1 image with original image, then I will take a look.

Also, It seems that the forum will not send email notifications (I have dozens of forum notifications every day, but they never appear in emails), so check the forum regularly.

@tuanphan Thanks I will make sure to check this regularly. I've amended the website and use the original image for How It Works for point 3. You can see the rocket ship is very large. Would like this to stay at 142px by 142px. I appreciate the help. 

10 hours ago, katech said:

@tuanphan Thanks I will make sure to check this regularly. I've amended the website and use the original image for How It Works for point 3. You can see the rocket ship is very large. Would like this to stay at 142px by 142px. I appreciate the help. 

Add to Home > Design > Custom CSS

@media screen and (max-width:640px) {
div#page-5e3215c6d7315a3d73873495 .image-block img {
    width: 50% !important;
    height: auto !important;
    left: 50% !important;
    transform: translateX(-50%);
}
div#page-5e3215c6d7315a3d73873495 .image-block .image-block-wrapper {
    padding-bottom: 50% !important;
}
}

Thanks for the css. Almost works but there is an issue. The image is cut in half. See screenshot below. Any suggestions?

2 hours ago, katech said:

Thanks for the css. Almost works but there is an issue. The image is cut in half. See screenshot below. Any suggestions?

Can you keep the code & I check again?

@tuanphanYes sure added the css. Please have a look if you have the time. Cheers

@tuanphan Any luck with the code? I'll need to change it back shortly as it looks bad in mobile now

On 2/12/2020 at 5:12 PM, katech said:

@tuanphan Any luck with the code? I'll need to change it back shortly as it looks bad in mobile now

Weird. Just checked again. I see it worked here.

@media screen and (max-width:640px) {
div#block-yui_3_17_2_1_1580342395763_54976 img {
    width: 30% !important;
    height: auto !important;
    transform: translateX(-50%);
    left: 50% !important;
}
div#block-yui_3_17_2_1_1580342395763_54976 .image-block-wrapper {
    padding-bottom: 30% !important;
}}