Hi there,
I’d like to have parallax on desktop but I don’t want the images on mobile to show up zoomed in so much.
When I have the images set to scroll — the images on mobile look great. However when parallax is on, the images get too zoomed in.
Q: Is there a way that I can have the desktop images set to parallax but have the mobile images set to scroll (so they don’t zoom in as much?)
Hey Courtney!
Please try adding following code to Quick CSS in Enfold theme options under General Styling tab
@media only screen and (max-width: 768px) {
.av-parallax {
transform: none!important;
}}
Cheers!
Yigit
Hi Yigit!
I added the code to CSS, seems as though the images are still zooming in quite large on mobile when parallax is on.
Hi!
are you talking about your background image? if yes use this code inside of Quick CSS field:
.av-parallax.avia-full-stretch.enabled-parallax.active-parallax {
background-position: 0px 183px !important;
background-size: 100% 100% !important;
}
and adjust as needed.
Regards,
Andy
Hi Andy!
I added that to the code to CSS, however on desktop it made a huge whitespace above the image.
Yes, I’m talking about the background image. Right now, on mobile, the background image zooms in too much. Wondering if there’s a way to makes it zoom in less on mobile?
Hey!
ah then try to wrap in within media queries, so it will only work on smaller screen sizes:
@media only screen and (max-width: 736px) {
.av-parallax.avia-full-stretch.enabled-parallax.active-parallax {
background-position: 0px 183px !important;
background-size: 100% 100% !important;
}}
Regards,
Andy