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.

Thanks

Screenshot 2020-07-20 at 17.29.08.png

IMG_2212.PNG

Link to comment
  • Replies 6
  • Created
  • Last Reply

Top Posters In This Topic

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

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.