Tagged: ,

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • November 14, 2016 at 1:22 pm #711932
    mirr

    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!

    November 15, 2016 at 5:43 am #712321
    Rikard

    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

    November 16, 2016 at 1:17 pm #712882
    mirr

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

    November 17, 2016 at 4:56 am #713342
    Rikard

    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

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