Support » Theme: Hestia » Images Does Not Scale on Mobile

  • Hi

    The Home page image and the images for the page titles does not appear to scale when the website is viewed on a mobile device.

    Any guidance will be appreciated.

    ARNOLD

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Hi Arnold,

    Background images are automatically responsive. The display though can be different depending on the device, this is just how css works. Please refer to the following knowledge base articles to know how background images react on responsive devices:

    https://themify.me/blog/background-image-varies-difference-devices

    Thanks!

    A C

    (@purplecodes)

    Themeisle Support

    Hi Arnold,

    The Big Title section is designed to be a full-width section and as a result, the background image is designed to cover the entire section, from top to bottom. This is the reason why the same big image can’t look exactly the same on every device. A small mobile device will not have the physical possibilities to display the entire picture, at the same time keeping the image ratio and all its properties. This is why, with some images, on mobile devices, some portions of the image may not be visible.

    The only solution, if you want to make sure the entire picture is visible on mobile devices would be to add the following code in Appearance > Customize > Additional CSS:

    @media (max-width: 480px) {
    .header-filter {
    background-size: contain;
    background-repeat: no-repeat;
    }
    }

    This way, each part of the image will be visible, but the dimensions will be different, depending on the image you are using and the device you are testing on.

    I hope you understand. Let us know if you have other questions about the theme.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Images Does Not Scale on Mobile’ is closed to new replies.