hello ,
first thx you for your free theme they are very cool for me !!
I have a question to change a small parametre on my site :
How can we render on mobile, a background image that is in parallax mode on the desktop version. (in mobile mode it remains at the top fixed)
need a small code for that :)…. THX
https://www.dropbox.com/s/comtr10fvpuaqak/img_1.jpg?dl=0
https://www.dropbox.com/s/9vb63za6wo8a0ac/img_2.jpg?dl=0
thank you !
Hi, thanks for getting in touch.
Parallax is working on mobile for me. Here is a quick test https://demo.siteorigin.com/corp/sandbox/. Is the row background parallax working on your mobile device when testing the page?
Thank you very much for your reply and your help!
To answer your question, I can see it in on the desktop version and in the mobile version too ! My image on my test is rather bland and it is true that it also moves but it is very noticeable!. So the question I should have asked is how to make it ‘stronger’ and how the image can be little zoomed and a little more centered in the mobile version column? sorry if my question has a funny meaning!
thx you again !
S.
https://www.dropbox.com/s/ehays236j5fz6ql/img_3.jpg?dl=0
Thanks for the update. I wasn’t quite sure if you wanted Parallax on or off for mobile. To disable Parallax on mobile, please, try going to SettingsPage Builder and enabling the Disable Parallax On Mobile setting. Does that help?
Hello and thank you for your answer,
in fact, no, that’s not what I want to do, I want to keep the paralax of the background image on mobile but I want the image to be zoomed in a bit and the paralax to be seen more than in scrole . ( if it’s possible of course )
Thanks again
best regard.
S.
Thanks for the feedback. Currently, we don’t have a separate set of settings for mobile. You can try adjusting the Parallax Scale setting at SettingsPage Builder to see if you can find a value that works a bit better for mobile and is still acceptable for desktop.
Hello, thanks again for the quick response!
I see what you mean, I can possibly do this in small steps. But I thought you could handle that a bit with custom CSS.
I had spotted this line:
.panel-grid .so-parallax .simpleParallax, .panel-grid .so-parallax img[data-siteorigin-parallax] {
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 200px; -> i change 0px to 200
width: 100%;
z-index: 0;
}
élément {
transform: translate3d(0px, 17px, 0px) scale(1.9); -> i change 1.5 to 1.9
will-change: transform;
transition: transform 0.4s cubic-bezier(0, 0, 0, 1) 0s;
}
of course it should only affect the mobile version…
is this way better?
Thank you again
Best regard
S.
Hi, thanks for the update.
Unfortunately, we’re limited regarding Custom CSS within our free support. You could target the rule in question using
!importantand a media query https://css-tricks.com/a-complete-guide-to-css-media-queries/. You could also limit the rule to a row or a page if you’d like Post: A Custom CSS Guide to Page Builder Row, Cell & Widget Attributes.Thank you for your help and your patience, I will explore the leads you give me!
thank you again and have a nice day !
best regard
S.
Sounds like a plan! Chat soon, cheers.