Enfold theme, Image size on smart phone and tablet

Hi Maarten!

Thank you for using Enfold.

The image in the slider is set as background and its background-size property is set to “cover” which means that it will force the image to cover the whole container. In doing so, it has to cut off parts of the images in order keep the image’s aspect ratio. We can set it to 100% but it will distort the image so another solution is to adjust the background position, making most of the images visible inside the slider container.

.avia-fullscreen-slider .avia-slideshow>ul>li {
    background-size: cover;
    background-position: 60% 50% !important;
    background-repeat: no-repeat;
}

Cheers!
Ismael

Hi!

The code should affect both tablet and phone view. Please remove browser cache or hard refresh before checking the page.

    @media only screen and (min-width: 768px) and (max-width: 989px) {
       .avia-fullscreen-slider .avia-slideshow>ul>li {
           background-position: 70% 50% !important;
       }
    }

    @media only screen and (max-width: 989px) {
        .avia-fullscreen-slider .avia-slideshow>ul>li {
            background-position: 60% 50% !important;
        }
    }

// http://i.imgur.com/3TjUMGM.png
// http://i.imgur.com/dnWIndS.png

Another solution is to add another slider (full width easy slider) that is specifically created for mobile view. Toggle the sliders’ display property with css media queries.

// http://kriesi.at/documentation/enfold/hide-menu-itemselements-on-mobile/

Cheers!
Ismael

Hi!

Please insert this additional css media queries.

@media only screen 
    and (max-device-width: 640px), 
    only screen and (max-device-width: 667px), 
    only screen and (max-width: 480px)
{ 
      .avia-fullscreen-slider .avia-slideshow>ul>li {
           background-position: 70% 50% !important;
       }
}

Adjust the background-position values as needed.

// https://www.w3schools.com/cssref/pr_background-position.asp

Regards,
Ismael

Hey!

Are you referring to the cell backgrounds? The images are a bit too big for the cells. The actual size of the cells are 790x705px on desktop view so having the same size for the image should improve the background display mobile view. Or you can use this css code.

@media only screen and (min-width: 768px) and (max-width: 989px) {
    .flex_cell.av-hide-on-mobile {
        background-position: 70% 50% !important;
    }
}

You can insert the css declaration inside one of the existing css media query.

Cheers!
Ismael

Hey!

I checked your demo theme http://kriesi.at/themes/enfold-health-coach/ and reducing the window size introduces the same issue. The cell background images are not resized.

As I explained in my first post, we can set the background-size property from “cover” to “100%” or “contain” but it will distort the image. Which one do you prefer?

@media only screen and (min-width: 768px) and (max-width: 989px) {
    .flex_cell {
        background-size: 100% 100% !important;
    }
}

And the cells’ background option, as much as possible, is not meant to be use for images with a specific focal point (image of a person an object etc). It works better for images with a wide range of focal flexibility such as image textures, wallpapers, sceneries etc. By adjusting the background position we can make the images’ focal point visible in the container.

@media only screen and (max-width: 989px) {
    .flex_cell {
        background-position: 70% 50% !important;
    }
}

Best regards,
Ismael