I have used the parallax background image display feature for a row on my page.
This has worked great for my desktop view, however I want to scale down or remove the image when viewed on a mobile device.
Any help on how to do this would be great.
Thanks,
Will
Hi William
Very sorry about the late reply. We work through a prioritized forum queue, and unfortunately it’s taken us some time to get to your thread.
https://siteorigin.com/about/forum-thread-prioritization/
Because it’s been a while since you posted this, would you mind letting us know if you still need help? If so, we’ll jump right in.
Hi there,
I know this is an old topic but I’m having a similar issue. Basically, if I could just disable the parallax on mobile devices that would be enough for me.
I have tried adding this to the style sheet:
@media only screen and (max-width: 1100px) {
.segment {
background-attachment: scroll !important;
background-position: center center !important;
}
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
.segment {
background-attachment: scroll !important;
background-position: center center !important;
}
}
it doesn’t seem to work.
my page is http://www.therealmichelangelo.com
Hi Michel’Angelo
You can fix/change this with some custom CSS. If you navigate to AppearanceCustom CSS, you’ll get our custom CSS editor. Just add the following code.
@media (max-width: 680px) { .panel-row-style[style] { background-position: center center !important; } }You might also need to install the SiteOrigin CSS Editor.