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

Stop Image Resize on Mobile

Question

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

 

Share this post


Link to post

10 answers to this question

Recommended Posts

  • 0

I see you fixed?


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
  • 0

@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?

Edited by katech

Share this post


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


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
  • 0

@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. 

Share this post


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

 


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
  • 0

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

 

2011026253_ScreenShot2020-02-11at9_07_20pm.thumb.png.60a95926f467598cdca811a03487325b.png

Share this post


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


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


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

image.thumb.png.6c24319984790f9bc3cca65147230de9.png


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

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...