Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • June 22, 2017 at 12:51 pm #811485
    WEBNEST_ch

    Dear all,

    Here a problem I cannot solve, seeking your help.

    Settings :

    A color-section(ID: #home-main), at top of a page, with :
    – section layout: At least 100% of browser height
    – section background:
    – image
    – attachment: parallax
    – background image position: top right
    – no repeat or stretch to fit (give same result)

    We also use following CSS rule to horizontally position the image to our wish (overriding the setting “background image position: top right”)
    #home-main .av-parallax-inner {
    background-position: 65% !important;
    }

    result :
    on desktop : ok
    on mobile:
    on android : ok
    IPhone 6/7, Firefox for Mobile on Android : problem :
    The background image is zoomed into, is vertically positionned at the bottom, and a big upper part is cut off.
    Expected is : same positionning as on desktop or on Android, background image vertically positionned on top, showing 100% of height, not zoomed in. Ok not to have parallax effect on mobile.

    The emulators I tried do not catch the problem. Use real devices to test.
    Related topic, but answer there does not help : https://kriesi.at/support/topic/mobile-vs-pc-display/

    A test page is available in private area

    How to get it right ? Thanks !

    June 26, 2017 at 9:20 am #812922
    Victoria

    Hey WEBNEST_ch,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
@media only screen and (max-width: 450px) {
  #home-main .av-parallax.enabled-parallax.active-parallax {
        transform: translate3d(0px, 55px, 0px) !important;
        height: 450px !important;
  }
  #home-main {
    height: 290px !important;
  }
  #home-main .av-parallax-inner {
    background-size: contain !important;
}
  #home-main .container .content {
    vertical-align: baseline;
  }
  #a_propos  .content {
      padding-top: 0px;
    }
  }
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

    June 30, 2017 at 6:08 pm #815099
    WEBNEST_ch

    Dear Victoria,
    Thanks for your answer and your effort. Unfortunately it is not what i mean. The behaviour is correct, or at least as I expect it on android default browser but buggy on Iphone 6/7 and on firefox for android.
    In private area, there are links to images of the same testing page with android default browser:
    correct.jpg
    and with the firefox browser for android. Problem also shows on Iphone 6 and 7
    buggy.jpg

    This problem appears only if we set the color section -> section background -> background attachment to parallax.

    Do you have a clean demo page with a parallax effect on a background image of a color section that I could test to see if the problem comes from other code from us or not ?

    For now on the homepage we made two identical color sections, one with parallax and the other one without, and hiding / showing using display: none / block with .avia_mobile

    July 5, 2017 at 6:17 am #816627
    Ismael

    Hi,

    Please try to use the following selector to adjust the background on android or firefox.

    Android:

    .avia-android #home-main .av-parallax-inner

    Firefox:

    .avia-mozilla #home-main .av-parallax-inner

    Best regards,
    Ismael

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