Jump to content

Controlling image display sizes on mobile

Recommended Posts

Site URL: https://www.leahchandler.ca


I'm having issues with image sizes when my site is viewed on mobile. Apparently spacers don't work for mobile views . For example, the image "Leah" at the end of my welcome message is massive on the phone, but normal size on desktop. Same with the image of me standing.

As well, when viewing on mobile I noticed there is padding in the text box in the first image on my site, but the sunset image quote doesn't have the same padding on each side. I've attached images to show what I mean.

Thanks so much for anyone that's able to assist. I appreciate it!

Screen Shot 2022-06-17 at 3.12.17 PM.png

Screen Shot 2022-06-17 at 3.12.27 PM.png

Screen Shot 2022-06-17 at 3.12.40 PM.png

Link to comment

With padding, you used this CSS, it affects all devices

#block-yui_3_17_2_13_1457552603071_12467 {
    background: rgba(255,255,255,.6);
    max-width: 80%;

you can add this CSS under to override width on mobile

@media screen and (max-width:640px) {
#block-yui_3_17_2_13_1457552603071_12467 {
    max-width: 95% !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

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.