Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • July 2, 2014 at 12:37 am #285961
    ewingmh

    I used the code from this post: https://kriesi.at/support/topic/why-the-parallax-image-are-left-aligned/
    To increase the size of one background image in particular: (the one with the rocket being launched – without this CSS the rocket was cut off on most screen resolutions.)
    #av_section_2 .av-parallax.avia-full-stretch {background-size: 100% 100%;}

    However, when that is viewed on a phone or a device it is severely mangled. is there a way to allow the 100% to be ignored on mobile devices?
    I tried this and it didn’t work:
    @media only screen and (min-width: 320px) and (max-width: 480px) {
    #av_section_2 .av-parallax.avia-full-stretch {
    background-attachment: scroll; height: 1952px; background-position: 0px 595px;
    }}

    July 2, 2014 at 2:15 am #285982
    Josue

    Hi,

    Can you post the link to your website please?

    Regards,
    Josue

    July 2, 2014 at 4:43 am #286020
    ewingmh

    http://www.gravitygroms.com

    July 2, 2014 at 5:35 am #286037
    Ismael

    Hi!

    Thank you for the link.

    Please use this on Quick CSS or custom.css:

    @media only screen and (max-width: 480px) {
#av_section_2 .av-parallax.avia-full-stretch {
background-size: 100% auto;
background-position: top center !important;
background-attachment: fixed !important;
}
}

    Cheers!
    Ismael

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