Hero image on mobile

Mystery Themes Support Themes Free Themes Fotogenic Hero image on mobile

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #14820
    CAP
    Participant

    Hi there, I was looking in the free version how the site eventually would look on mobile. What I’ve noticed is that the Hero image does not scale. Instead it shows only a little part of the original photo. Besides that, it also looks a bit blurry.

    Can you please explain why this behavior occurs?

    Thanks 🙂

    #14826
    Mystery Themes
    Keymaster

    Hello there

    Can you please send us the live URL of your site so that we can check and give you feedback ?

    Thanks 🙂

    #14835
    CAP
    Participant
    This reply has been marked as private.
    #14858
    Mystery Themes
    Keymaster

    Hello there

    We recommend you to use the high-quality image for the hero image and also as it was background image it will adapt according to your screen. If you want to show full image you can try the following code:

    @media (max-width: 1200px) {
    .mt-fotogenic-content-wrapper {
    	background-size: 100% 70%;
    	min-height: 400px !important;
    }
    }

    Thanks 🙂

    #14868
    CAP
    Participant

    I’m sorry but that didn’t work at all. I have tried many @media ways after but none seem to respond.

    I also replaced my image with a larger one. I am amazed that you need to do so much trick to get the hero image to be responsive.

    #14902
    Mystery Themes
    Keymaster

    For smaller devices you can use the following media width code:

    @media (max-width: 600px) {
    .mt-fotogenic-content-wrapper {
    	background-size: 100% 70%;
    	min-height: 400px !important;
    }
    }

    Large image has a higher resolution so it does not look blur on devices. Also, we have added the hero image as a background image so that it adapts with any devices but due to the different resolution adpatation may vary on background size so some images get cut off on small deveices.

    Thanks 🙂

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