Jump to content

Lange - Resize Images for Mobile

Recommended Posts

Site URL: http://www.billydupee.co.uk

I have images for my projects set to full width on my dekstop home page as you can see in the screen shot attached. However, when I view the page on mobile the images are cropped. I want to use code to either position the images how I want them to appear on mobile or to set the images to automatically scale down proportionally on mobile so more of the image can be seen. You can see how the crop on mobile currently means the point of interest of the image is out of frame.


Screenshot 2020-07-20 at 17.29.08.png


Link to comment
  • Replies 6
  • Views 467
  • Created
  • Last Reply

Thanks. I'm currently using 7.0. I cannot edit the mobile version of the site in anyway. When I view the site in the mobile preview through Squarespace and click on edit, it will automatically change to the desktop site. Giving no customisation of the look of the mobile site. Is there not code that allows the proportional cropping of images for mobile or can you adjust the position within the frame of the image using code?

Link to comment

Add to Home > Design > Custom CSS

@media screen and (max-width:640px) {
#index-section-studio-171 figure img {
    width: 100% !important;
    left: 0 !important;
    height: auto !important;
    top: 0 !important;
#index-section-studio-171 article.index-item.has-item-image {
    height: 35vh !important;


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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment


This topic is now archived and is closed to further replies.

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