Responsive problems Fullscreenslider

Hey McFly,

Thank you for using Enfold.

I tried to access the site but the authentication (.htaccess) details are not working. Could you please provide a screenshot of the issue? And please note that the images in the full screen slider are added as background and their background-size property (https://www.w3schools.com/cssref/css3_pr_background-size.asp) are set to “cover” which means that they will cover the entire slider container but parts of the images might be cut off in order to keep their aspect ratio. One workaround is to add another slider (full width) that is specifically created for mobile then toggle the sliders’ display properties with css media queries.

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

Best regards,
Ismael

Hi!

The background-size property is already set to “cover” which is why the image overflows outside the slider container. Another workaround is to adjust the background-position property so that the focal point of the image is visible in the slider container.

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

If this is not working, try this:

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
  /* For portrait layouts only */
  .avia-fullscreen-slider .avia-slideshow > ul > li {
    background-position: 70% 50% !important;
    }
}

Adjust the value of the background-position as needed. And don’t forget to remove browser cache or hard refresh before checking the page.

Regards,
Ismael

Hi,

Great, glad we could help and thanks for the kind words :-)

Please let us know if you should need any further help on the topic or if we can close it.

Best regards,
Rikard

Hi,

Thanks for letting us know. Please open a new thread if you should have any further questions or problems.

Best regards,
Rikard