Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #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.
    #973676

    Hey 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,
    Victoria

    #974170

    Hey 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! :)

    #974289

    Hi 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,
    Victoria

    #977860

    Hi 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!

    #977884

    every 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.
    #977902

    sorry 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 }
    #983284

    Hi 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! :)

    #983480

    Hi 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

Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.