Tagged: ,

Viewing 17 posts - 1 through 17 (of 17 total)
  • Author
  • #299636


    first I have to say that your theme helped me a lot to achieve the design I intended for my website, so thank you for developing it :) I have a question though:
    My Revolution Slider looks good on desktop and tablet but on a phone the elements appear very small. Is there a way to replace a slider with text and maybe an image below a certain browser width instead of just hiding it? I was not sure if I should ask you or the team from RS, but maybe you have a solution at hand.

    Thanks in advance!


    Hey Ma-rin!

    Can you post the link to your website and point out revolution slider you would like to remove please?
    Using media queries, you can add an element right below your slider element and display it only on mobile and hide on desktop.


    This reply has been marked as private.


    Please add following code to Quick CSS in Enfold theme options under General Styling tab to hide slider on mobile

    @media only screen and (max-width: 990px) {
    div#layer_slider_1 { display: none; }}

    Please also see – http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/ and turn on custom CSS field for ALB elements and then give the element you would like to display instead of slider a custom class and add following code to Quick CSS as well

    @media only screen and (min-width: 990px) {
    .your-custom-class { display: none; }}



    Thanks, that is a very good solution! Unfortunately I have another problem now that I just noticed (it was there even before I put in the code you suggested). The website looks fine on desktop and mobile, but on my tablet (Kindle Fire HD 7″) elements are missing, one background image covers the whole website and everything seems out of place.

    What happened there?



    Can you post a screenshot please? You can upload your screenshots on imgur.com or Dropbox public folder and post the links here. I do not have a tablet to check your website but i tried re-sizing the browser window and could not reproduce the issue.

    Best regards,

    This reply has been marked as private.

    Hi Ma-rin!

    Sorry for the late reply.
    Please try adding following code to Quick CSS as well and check if that helps

    @media only screen and (max-width: 1024px) {
    .av-parallax.avia-full-stretch { background-size: cover!important; }}

    please do not forget to flush browser cache on your tablet after applying the code



    Hi Yigit,

    it fixed the desktop version as there is no longer a white stripe across the screen. But on the tablet it still looks the same (Firefox, it works in other browsers). It works on the browser that comes with the Fire HD.

    • This reply was modified 6 years, 11 months ago by  Ma-rin.


    Unfortunately i do not have a mobile device that supports Firefox mobile browser, so i am unable to check your website on an actual device but have you tried flushing browser cache? Was it working fine on default browser before applying the code?



    Yeah I flushed the browser cache and tried again and deleted all the other temporary files just to be sure but nothing happened. Without the code the default browser works better but, again, has the white stripes.


    Maybe I could try turning off the parallax effect for mobile and just use a simple background image? If so I need to go back to one of my first questions: If I use your advice for switching elements on and off for mobile or desktop: does it still load the elements that are not visible and is therefore bad when it comes to load times?



    Since my suggestion was to use custom CSS, yes, elements will be visible in source code. You can speed test your website and check if it does make any difference.

    Best regards,


    To follow up on this, is it possible to simply replace a parallax with a normal background (image or color)?

    Do you guys know how its done? Would be beyond helpful.



    @dzimnikov: Please add this in the functions.php file:

    // custom script
    add_action('wp_footer', 'ava_custom_script');
    function ava_custom_script(){
    <script type="text/javascript">
    (function($) {
        function a() {
            if($('.avia-section .av-parallax').length >= 1) {
                $('.avia-section').each(function() {
                    var section  = $(this),
                        parallax = section.find('.av-parallax-inner'),
                        pbg      = $(parallax).attr('style').split(';'),
                        bg       = ''.
                        bgurl    = '';
                    if($(parallax).length != 1) return;
                    $(pbg).each(function(key, value) {
                        if(value.indexOf('background-image') != -1) {
                            bg = value;
                    bgurl = bg.split(' ');
                    $(bgurl).each(function(key, value) {
                        if(value.indexOf('url') != -1) {
                            bgurl = value;
                        "background-image" : bgurl,
                        "background-attachment" : "scroll",
                        "background-position" : "center center"

    Remove browser cache or hard refresh before checking the page.

    Best regards,



    • This reply was modified 4 years, 1 month ago by  codecreative. Reason: fixed

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

    Best regards,

Viewing 17 posts - 1 through 17 (of 17 total)

The topic ‘Replace slider on mobile phone’ is closed to new replies.