-
AuthorPosts
-
June 14, 2018 at 7:52 pm #972975
Hi there Enfold team!
On this page:
http://circle2media.com/services/
Is there a way to position the three different background images individually on mobile view? Something like first image should center-center on mobile, second image is top-center, and then third image is bottom-center.
Thank you so much!:)
- This topic was modified 6 years, 4 months ago by Archie.
June 16, 2018 at 6:07 pm #973676Hey Archie,
It might be easier to hide these sections on mobile screens and make the same ones with images optimized for mobile, on the other hand, there is too much text and it might be overflowing.
Best regards,
VictoriaJune 18, 2018 at 11:15 am #974170Hey Victoria!
Thank you for your response!
How do we hide these images for mobile, and then display an mobile-optimized image instead? Can you please show me how?
Thank you so much! You rock! :)
June 18, 2018 at 2:53 pm #974289Hi Archie,
You just need to prepare the scaled-down images and create the cope element using those smaller images and show them on mobile.
Best regards,
VictoriaJune 26, 2018 at 11:25 am #977860Hi Victoria!
Thank you for your response.
Unfortunately I am not sure I know how to create a cope element and how to display it on mobile view. Also, the video is 4 hours long. Do we have some kind of Enfold support document that I can just follow step by step?
Thanks!
June 26, 2018 at 12:04 pm #977884every mobile device gets on html the class: avia_mobile
so you can use that to have a specific rule:
error see next comment
but i think the fixed positioning will not work well on all mobile devices. And the rule is set via enfold to scroll on default- This reply was modified 6 years, 4 months ago by Guenni007.
June 26, 2018 at 12:38 pm #977902sorry i see that on mobile the background goes to new containers – and the av-parallax containers are on scroll and absolute positioned.
there must be a different solution for it.Edit:
because it gets the background-size : cover – we can not do anything with that – but on all mobiles the images seems to be wider than their screen width. So lets get rid of the size option – than you can set positioning:.avia_mobile .page-id-24 #av_section_2 .av-parallax {background-size: initial !important; background-position: center center !important } .avia_mobile .page-id-24 #av_section_4 .av-parallax {background-size: initial !important; background-position: center top !important } .avia_mobile .page-id-24 #av_section_6 .av-parallax {background-size: initial !important; background-position: center bottom !important }
July 9, 2018 at 6:00 pm #983284Hi Guenni!
Thank you so much for your response.
I’m afraid I am not really sure I follow your instructions. Do you mean that I should add this code to quick css?
.avia_mobile .page-id-24 #av_section_2 .av-parallax {background-size: initial !important; background-position: center center !important } .avia_mobile .page-id-24 #av_section_4 .av-parallax {background-size: initial !important; background-position: center top !important } .avia_mobile .page-id-24 #av_section_6 .av-parallax {background-size: initial !important; background-position: center bottom !important }
Looking forward to your response. Thank you! :)
July 10, 2018 at 4:27 am #983480Hi Archie,
Yes, please try it out in Quick CSS to see if you have any luck with it. Thanks @guenni007 for helping out :-)
Best regards,
Rikard -
AuthorPosts
- You must be logged in to reply to this topic.