Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #711932

    Hello,

    I made a website for a client who is very happy with it, but she is not happy at all with the images on mobile.
    The images crop pretty weird, and because she has all pictures of herself this is a big problem.
    The pictures look great on desktop but weird on mobile.

    My colorsection is custom height 500px, large padding

    How can I fix this?

    Thanks so much for the help, and thanks for making an awesome theme!

    #712321

    Hey mirr,

    If you want greater control over how the images look on mobile you could create another Color Section to only show for mobile and upload images better adapted to that screen format. You can assign IDs to your sections then show/hide the correct one using CSS like this:

    @media only screen and (min-width: 768px) {
    #section-desktop {
      display:block !important;
    }
    #section-phone {
      display:none !important;
    }
    }
    
    @media only screen and (max-width: 767px) {
    #section-desktop {
      display:none !important;
    }
    #section-phone {
      display:block !important;
    }
    }

    Best regards,
    Rikard

    #712882

    Thanks Rikard! This works great! What’s the best size to upload the mobile images?

    #713342

    Hi,

    I would try keeping the width at the maximum width of the viewport or a bit above, meaning 768 pixels wide, but you could probably go a bit lower as well if you want to load them faster :-)

    Best regards,
    Rikard

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.