Tagged: ,

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

    Hello,

    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!

    #299642

    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.

    Regards,
    Yigit

    #299650
    This reply has been marked as private.
    #300240

    Hi!

    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; }}

    Cheers!
    Yigit

    #300381

    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?

    #300727

    Hey!

    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,
    Yigit

    #301024
    This reply has been marked as private.
    #302709

    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

    Cheers!
    Yigit

    #302805

    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.
    #302808

    Hi!

    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?

    Cheers!
    Yigit

    #302838

    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.

    #302840

    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?

    #303165

    Hey!

    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,
    Yigit

    #658705

    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.

    #659649

    Hi,

    @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;
                        }
                    });
    
                    $(this).find('.av-parallax').remove();
                    $(this).removeAttr('style');
                    $(this).css({
                        "background-image" : bgurl,
                        "background-attachment" : "scroll",
                        "background-position" : "center center"
                    });
                });
            }
        }
    
        a();
    })(jQuery);
    </script>
    
    <?php
    }

    Remove browser cache or hard refresh before checking the page.

    Best regards,
    Ismael

    #806548

    solved

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

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

    Best regards,
    Mike

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

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