-
AuthorPosts
-
August 4, 2014 at 12:56 pm #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!
August 4, 2014 at 1:11 pm #299642Hey 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,
YigitAugust 4, 2014 at 1:46 pm #299650This reply has been marked as private.August 5, 2014 at 2:48 pm #300240Hi!
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!
YigitAugust 5, 2014 at 7:10 pm #300381Thanks, 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 #300727Hey!
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,
YigitAugust 7, 2014 at 11:13 am #301024This reply has been marked as private.August 11, 2014 at 4:43 pm #302709Hi 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!
YigitAugust 11, 2014 at 7:32 pm #302805Hi 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, 4 months ago by Ma-rin.
August 11, 2014 at 7:36 pm #302808Hi!
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!
YigitAugust 11, 2014 at 8:15 pm #302838Yeah 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 #302840Maybe 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 #303165Hey!
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,
YigitJuly 9, 2016 at 6:53 am #658705To 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 #659649Hi,
@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,
IsmaelJune 11, 2017 at 12:44 pm #806548solved
- This reply was modified 7 years, 6 months ago by codecreative. Reason: fixed
June 11, 2017 at 2:40 pm #806572 -
AuthorPosts
- The topic ‘Replace slider on mobile phone’ is closed to new replies.