Jump to content

Stop Image Resize on Mobile

Recommended Posts

  • Replies 10
  • Created
  • Last Reply

Top Posters In This Topic

@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
Link to comment
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.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

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

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.