Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • June 14, 2018 at 7:52 pm #972975
    Archie

    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, 5 months ago by Archie.
    June 16, 2018 at 6:07 pm #973676
    Victoria

    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

    June 18, 2018 at 11:15 am #974170
    Archie

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

    June 18, 2018 at 2:53 pm #974289
    Victoria

    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

    June 26, 2018 at 11:25 am #977860
    Archie

    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!

    June 26, 2018 at 12:04 pm #977884
    Guenni007

    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, 5 months ago by Guenni007.
    June 26, 2018 at 12:38 pm #977902
    Guenni007

    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 }
    July 9, 2018 at 6:00 pm #983284
    Archie

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

    July 10, 2018 at 4:27 am #983480
    Rikard

    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

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