Lange - Resize Images for Mobile

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

Hi there, my home page images are set to be full width on desktop/laptop. However when I view my site on mobile they are cropped and wont resize to fit mobile. Can I set them to resize just for mobile but stay full width on desktop/laptop?

Thanks

Hi there, here are screen shot examples of what I mean. I want to be able to control the cropping on the images on mobile and show specific parts of the images for mobile whilst showing the full image for Desktop.

Desktop:

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

Hi there, how do I apply this to the whole home page?

@tuanphan Thanks for helping on this. The code worked on the first project image. But how can I apply this to all projects on the home page when viewed on mobile? Please let me know the code.

Thanks

Try editing to this

@media screen and (max-width: 640px) {
    .homepage .index-section figure img {
        width:100% !important;
        left: 0 !important;
        height: auto !important;
        top: 0 !important
    }

    .homepage article.index-item.has-item-image {
        height: 35vh !important
    }
}