Upfront slideshow is not responsive

When looking at my site on different size monitors, I noticed the slideshow is not responsive. How do I fix that?

  • James Morris
    • WordPress Enthusiast

    Hello Gwindylyn

    I hope you are well today.

    First, please note that Upfront (Builder and child themes) has been retired and is no longer officially supported.

    Please see the following links:

    https://premium.wpmudev.org/blog/goodbye-upfront-hello-everybody/

    https://premium.wpmudev.org/retiring-our-legacy-plugins/

    That being said, I’ve previously addressed this issue in the following thread:

    https://premium.wpmudev.org/forums/topic/images-in-upfront-region-image-slider-responsive

    And we’ve published some good articles on our blog about responsiveness and Upfront:

    https://premium.wpmudev.org/blog/upfront-responsive/

    I hope this gets you going in the right direction.

    Best regards,

    James Morris

  • Gwindylyn
    • The Incredible Code Injector

    That makes me really sad as I have tons of clients that use Upfront. Thank you for those links though.

    As for my responsive issue, does that mean that you can no longer login through Support Access and see why it is not being responsive? I read the topic you linked and it seems I am doing everything as you showed.

  • James Morris
    • WordPress Enthusiast

    Hello Gwindylyn

    Sure! Just like any other WordPress related issue, I can login and take a look for you. I’ll do my best to find a solution too. But if this turns out to be something that requires a significant code fix, I’m afraid that will be beyond the scope of support.

    In order to help you better with your issue, would you please grant me access to your site?

    You can learn how to grant WPMU DEV Support Access at the following link:

    https://premium.wpmudev.org/docs/getting-started/getting-support/#chapter-5

    Please reply back here once you’ve enabled access so I will be notified.

    Best regards,

    James Morris

  • James Morris
    • WordPress Enthusiast

    Hello Gwindylyn

    Thank you for enabling access.

    I’ve checked your site and the only slider I saw was at the bottom of the homepage. For me, it’s working quite well. The images are responsive and the column count updates correctly when viewed on larger displays.

    I’m afraid I’m having difficulty reproducing any issue.

    Would you please clarify what it is you’re seeing (screenshots are very helpful) and let me know a bit more about what you are using to access the site?

    Helpful information includes:

    – Operating System

    – Browser (including version)

    – Whether you’ve tried in incognito/private browsing mode

    – Whether you’ve tried on mobile

    — If so, what Operating System

    — What Browser (including version)

    Looking forward to hearing back from you.

    Best regards,

    James Morris

  • Gwindylyn
    • The Incredible Code Injector

    Sure thing. I have already tried toggling that thinking it might help but nothing changed. I did disable it this time and leave it that way as you requested. It still does not scale the images down as you can see since the wording can not be viewed in smaller sizes. Any other ideas?

  • Kris
    • Support

    Hi Gwindylyn

    I made some small investagation in source of your site.

    I prepare a fix for mobile devices which should make this more responsive.

    For smaller devices I made my decision in below css to show “Give the gift of ice cream” button below the image slider to show entire images for users.

    Please add this code using this plugin https://wordpress.org/plugins/custom-css-js/, then my code will be not overwrite by Upfront.

    @media all and (min-width:320px) and (max-width: 480px) {
    #upfront-region-container-home-new-slider {height:188px; padding-bottom:300px;}
    #upfront-region-container-home-new-slider .upfront-button {height:188px; margin-top:-120px;}
    .upfront-output-bg-slider {height:188px !important;}
    .upfront-output-bg-slider .upfront-image-lazy {width:480px !important; height:188px !important; position:absolute; left:0;}
    }

    @media all and (min-width:480px) and (max-width: 550px) {
    #upfront-region-container-home-new-slider {height:216px ; padding-bottom:300px;}
    #upfront-region-container-home-new-slider .upfront-button { height:216px ; margin-top:-120px;}
    .upfront-output-bg-slider {height:216px !important;}
    .upfront-output-bg-slider .upfront-image-lazy {width:550px !important; height:216px !important; position:absolute; left:0;}
    }

    @media all and (min-width:550px) and (max-width: 786px) {
    #upfront-region-container-home-new-slider { height:308px ; padding-bottom:400px;}
    #upfront-region-container-home-new-slider .upfront-button { height:308px ; margin-top:-20px;}
    .upfront-output-bg-slider {height:308px !important;}
    .upfront-output-bg-slider .upfront-image-lazy {width:786px !important; height:308px !important; position:absolute; left:0;}
    }

    @media all and (min-width:786px) and (max-width: 980px) {
    #upfront-region-container-home-new-slider { height:384px ; padding-bottom:500px;}
    #upfront-region-container-home-new-slider .upfront-button { height:384px ; margin-top:-200px;}
    .upfront-output-bg-slider {height:384px !important;}
    .upfront-output-bg-slider .upfront-image-lazy {width:980px !important; height:384px !important; position:absolute; left:0;}
    }

    @media all and (min-width:980px) and (max-width: 1100px) {
    #upfront-region-container-home-new-slider { height:431px ; padding-bottom:500px;}
    #upfront-region-container-home-new-slider .upfront-button { height:431px ; margin-top:-180px;}
    .upfront-output-bg-slider {height:431px !important;}
    .upfront-output-bg-slider .upfront-image-lazy {width:1100px !important; height:431px !important; position:absolute; left:0;}
    }

    Hope this help :slight_smile:

    Kind Regards,

    Kris

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.