Home / Forums / You Theme Support / Overlay issue when using background with 3d animation

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • xtreme416
    xtreme416
    Participant

    Hi,

    When using 3d animation and the row is using a full cover background image with overlay colour, there is an issue where the bottom of the slide is missing the overlay colour – aka the overlay does not extend to the whole row when the text covers more than the initial viewing area.

    This is only an issue on mobile devices.

    I’ve tried many different settings, nothing seems to fix the issue.

    Row Setup: Stretch Row, 100% height
    Design Options: cover image (center, center)
    Background Extras: Parallax disabled, Overlay color selected with 50% opacity.

    Take a look at this URL (on mobile device)
    https://420.nubranch.ca/ancient-strains/

    There are 2 slides with full background images – slide 3 and 5.

    xtreme416
    xtreme416
    Participant

    Example from my phone:

    Overlay issue

    xtreme416
    xtreme416
    Participant

    Image:

    https://imgur.com/a/bIoFk

    Hi @xtreme416

    What specific mobile device and browser did you test this on? I tested it on Chrome on my iPhone 6 and also simulated multiple mobile devices using Chrome Dev Tools and the color overlay actually spans the whole height of the browser from my end.

    Regards,

    xtreme416
    xtreme416
    Participant

    I tested with iPhone 6 and OnePlus One.

    If you test with Chrome Dev Tools (toolbar toggle) make sure to refresh the page after selecting the device type. See attached.

    https://imgur.com/a/2n1FE

    Hi @xtreme416

    I do see it now. I was testing on an actual iPhone 6 plus and used the same device on Chrom Dev Tools.

    The issue is evident on iPhone 6 because of the smaller real estate. The height of the overlay is controlled by javascript so it is best not to mess with it.

    The best work around would be to set the line-height of this specific text block to around 21px from the current 26px on mobile devices that are less than 380px.

    This way, the row would not expand to long, thus not breaking the overlay color.

    Regards,

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.