Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #1250524

    I have issue with full screen slider, its seems not responsive. See here, https://ibb.co/7y3LY2L . My slider images was cut when view on mobile.
    I’ve also try css code from support page using code below, but its not working.
    I’ve clear cache also not working. Please help me :

    @media only screen and (max-width: 1366px) {
    .avia-fullscreen-slider .avia-slideshow[data-image_attachment=”fixed”] > ul > li {
    background-attachment: scroll !important;
    }
    }
    @media only screen and (max-width: 1366px) {
    .flex_cell {
    background-attachment: scroll !important;
    }
    }

    @media only screen and (max-width: 768px) {
    .avia-fullscreen-slider .avia-slideshow[data-image_attachment=”fixed”]>ul>li {
    background-attachment: scroll;
    }}

    @media only screen and (max-width:767px) {
    .responsive #top .avia-slideshow-controls a {
    display: block !important;
    opacity: 1 !important;
    }
    }

    #1250716

    Hey Syazwina,

    Thanks for the login details. First off, could you try updating the theme to the latest version (4.7.6.4) to see if that helps please? https://kriesi.at/documentation/enfold/how-to-install-enfold-theme/#theme-update. Also make sure that you are running PHP 7.2 or higher on the server.

    Best regards,
    Rikard

    #1250743

    Hi, I have a similar issue after an update to the latest version. Now there is white space around the full-width easy slider and white space on sides also, which wasn’t the case before the update. Downgraded to v 4.7.6 and the issue resolved.

    • This reply was modified 3 years, 6 months ago by Steve.
    #1251049

    Hi Steve,

    Sorry for the problem. If you need help with the problem in question then we need to see it somewhere. You could copy your site to a staging site for example, and update there.

    Best regards,
    Rikard

    #1251055

    Hi Rekard,
    I’ve update the theme and also .php script to latest version, however its still not working. Kindly help me.

    Regards,
    Syazwina

    #1251766

    Hi, I saved the broken version as html. Will this help?

    Many thanks!

    #1252052

    Hi,

    @win90
    sorry for the late reply and thanks for the login. So since your slides contain text in the image that you want to show we will need to make the background image either “contain” or “cover” for mobile & tablet, but because of the portrait orientation of these devices the background height also needs to be adjusted so the full width of the image will show.
    So, I removed your above css and added this to your Quick CSS:

    @media only screen and (max-width: 1025px) {
    .avia-fullscreen-slider .avia-slideshow[data-image_attachment="fixed"] > ul > li {
        background-attachment: scroll !important;
        background-size: cover !important;
        background-repeat: no-repeat !important;
    }
    }
    @media only screen and (max-width: 330px) { 
    .avia-builder-el-0.avia-fullscreen-slider .avia-slideshow[data-image_attachment="fixed"] {
        height: 190px !important;
    }
    }
    @media only screen and (min-width: 331px) and (max-width: 385px) { 
    .avia-builder-el-0.avia-fullscreen-slider .avia-slideshow[data-image_attachment="fixed"] {
        height: 200px !important;
    }
    }
    @media only screen and (min-width: 386px) and (max-width: 435px) { 
    .avia-builder-el-0.avia-fullscreen-slider .avia-slideshow[data-image_attachment="fixed"] {
        height: 260px !important;
    }
    }
    @media only screen and (min-width: 436px) and (max-width: 770px) { 
    .avia-builder-el-0.avia-fullscreen-slider .avia-slideshow[data-image_attachment="fixed"] {
        height: 480px !important;
    }
    }

    This css covers the most common 3 phone sizes & 2 tablet sizes, please clear your browser cache and check.


    @Steve
    from your HTML copy it looks like this css would correct, I’m not sure why this would occur, perhaps some css conflict, but give this a try:

    #main > div.main_color.container_wrap_first.container_wrap.fullsize > div {
    	max-width: 100% !important;
    	padding: 0 !important;
    }
    #main > div.main_color.container_wrap_first.container_wrap.fullsize > div > .content {
    	padding: 0 !important;
    }

    After applying the css, please clear your browser cache and check.

    Best regards,
    Mike

    #1252140

    Dear Mike,

    Thanks a lot!..It’s worked.. I really appreciate it..
    Regards,

    • This reply was modified 3 years, 6 months ago by win90.
    #1252243

    Hi,
    Glad we were able to help, we will close this now. Thank you for using Enfold.

    For your information, you can take a look at Enfold documentation here
    For any other questions or issues, feel free to start new threads in the Enfold forum and we will gladly try to help you :)

    Best regards,
    Mike

Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘Fullscreen Slider Not Responsive’ is closed to new replies.