Lange - Resize Images for Mobile

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

Is anyone able to give some guidance on this issue? Are there any solutions to the problem?

Thanks in advance!

What I mostly do for clients is to design a mobile version of the landing page (hidden on desktop and vice-versa)  with a little piece of CSS

Version 7.0 or 7.1?

that will make you more flexible
 

Some examples attached

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?

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;
}
}

Thanks so much tuanphan. That has worked well for the first project on my site. How can I change the code to do the same for all projects on my page for mobile only?

Thanks again..

Hi Tuanphan, are you answet the question above to make that code affect all the images for projects on my front page?

Thanks