Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
billydupee

Lange - Resize Images for Mobile

Recommended Posts

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

Share this post


Link to post

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:

407603452_Screenshot2020-07-20at17_29_08.thumb.png.7f074d97f442da9208d89859568838af.png

IMG_2212.PNG

Share this post


Link to post

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

 


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Armadillo - Free portfolio template

Share this post


Link to post

@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

Share this post


Link to post

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

 


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Armadillo - Free portfolio template

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...