Replace slider on mobile phone - Support | Kriesi.at

Tagged: mobile, slider

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

Author

Posts
August 4, 2014 at 12:56 pm #299636

Ma-rin
Participant

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!

August 4, 2014 at 1:11 pm #299642

Yigit
Keymaster

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

August 4, 2014 at 1:46 pm #299650

Ma-rin
Participant

This reply has been marked as private.

August 5, 2014 at 2:48 pm #300240
Yigit
Keymaster
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
August 5, 2014 at 7:10 pm #300381

Ma-rin
Participant

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?

August 6, 2014 at 4:31 pm #300727

Yigit
Keymaster

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

August 7, 2014 at 11:13 am #301024

Ma-rin
Participant

This reply has been marked as private.

August 11, 2014 at 4:43 pm #302709
Yigit
Keymaster
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
August 11, 2014 at 7:32 pm #302805
Ma-rin
Participant
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 10 years, 3 months ago by Ma-rin.
August 11, 2014 at 7:36 pm #302808

Yigit
Keymaster

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

August 11, 2014 at 8:15 pm #302838

Ma-rin
Participant

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.

August 11, 2014 at 8:18 pm #302840

Ma-rin
Participant

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?

August 12, 2014 at 1:01 pm #303165

Yigit
Keymaster

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

July 9, 2016 at 6:53 am #658705

Dzimnikov
Participant

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.

July 12, 2016 at 4:05 am #659649
Ismael
Moderator
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
June 11, 2017 at 12:44 pm #806548
codecreative
Participant
solved
- This reply was modified 7 years, 5 months ago by codecreative. Reason: fixed
June 11, 2017 at 2:40 pm #806572

Mike
Moderator

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

Best regards,
Mike
Author

Posts