Tagged: Crash, Hide, LayerSlider, mobile, slow
-
AuthorPosts
-
July 22, 2013 at 1:07 pm #26579
Hi, first off I wanted to say this is an amazing theme, and super easy to setup as I’ve never used WordPress up to now, so a huge thanks!
I wanted to ask a quick question though, as the site can currently freeze and crash browsers on iphones when we view it.
It seems to be since we have built in the parallax (ie fixed) background image on a colour space with text overlayed (or it could potentially be the layerslider as well).
What is the best way to turn off these sections on mobile? or better hey is it possible to switch the ‘fixed’ background image to a standard scrolling one on mobile?
The main offending page is the homepage of our site over at http://www.syncinteractive.co.uk
As we’re a mobile specific company, it’s not great if our mobile site crashes ;)
I’ve tried adding the following in from another thread I found to the custom css:
/*
Mobile Styles
================================================== */
/* Note: Add new css to the media query below that you want to only effect the Mobile and Tablet Portrait view */
@media only screen and (max-width: 1024px) {
/* Add your Mobile Styles here */
.main_menu ul:first-child > li > a {
padding: 0 10px;
font-size: 11px;
}
}
and edited the above (although we need the above in for something else) to point to the layerslider but I’m obviously not doing it right as it refused to hide it when on smaller screens.
Any help you can provide would be very much appreciated!
July 22, 2013 at 1:25 pm #130929I’ve just dropped the following into the custom CSS, which turns off the layerslider when viewing the web version and adjusting the browser to below 640, however this does still not seem to work on the iphone itself. What would I need to tweak here?
@media only screen and (max-width: 640px){
.ls-wp-fullwidth-container, .ls-wp-fullwidth-helper, .ls-container, .ls-container{
display: none !important;
}
}
July 23, 2013 at 4:03 am #130930Hi,
Nice website. :)
You should probably try this:
@media only screen and (min-width: 320px) and (max-width: 989px) {
.avia-layerslider {
display: none !important;
}
}I checked your website and I can’t see the slider on mobile view.
http://responsinator.com/?url=http%3A%2F%2Fwww.syncinteractive.co.uk%2F
Regards,
Ismael
-
AuthorPosts
- The topic ‘disabling fixed (parallax) backgounds on mobile’ is closed to new replies.