Banner with mask widget bug on tablet view

This topic has 6 replies, 2 voices, and was last updated 2 years ago ago by Olga Barlow

  • Avatar: IvanMTK
    IvanMTK
    Participant
    January 25, 2022 at 03:37

    We’ve experienced an issue with the Banner with mask widget in Elementor and it appears when viewing the website in tablet view, specifically with the following dimensions 1024 x 768. I’ve attached a screenshot in the private content area showing this issue in more detail.

    Please, contact administrator
    for this information.
    5 Answers
    Avatar: Olga Barlow
    Olga Barlow
    Support staff
    January 25, 2022 at 12:35

    Hello,

    Sorry, but what’s the problem? That buttons do not have space? Then add the min-height in the banner image settings https://prnt.sc/26j2j6h

    Regards

    Avatar: IvanMTK
    IvanMTK
    Participant
    January 26, 2022 at 07:01

    Hello,
    I’ve gone ahead and tried to modify this value under tablet view however regardless of any value I entered in that field, it didn’t reflect any changes on the front-end.

    In addition, there is no way to set the minimum height of the images when the view is tablet (landscape). Right now it’s only portrait.

    Avatar: Olga Barlow
    Olga Barlow
    Support staff
    January 26, 2022 at 13:09

    Hello,

    I checked your banners and it works for me https://prnt.sc/26jl26g
    You can set the min-height for the desktop and the tablet (landscape) will use that. What min-hight do you want to use for these banners?

    Regards

    Avatar: IvanMTK
    IvanMTK
    Participant
    January 27, 2022 at 06:41

    I’ve tried adding a media query for one of the banners on the homepage for ipad landscape however it’s not actually being reflected. I’ve spent several hours trying to troubleshoot this but not getting anywhere.

    this is the css I’m using. it’s in the customizer

    @media only screen 
      and (min-device-width: 768px) 
      and (max-device-width: 1024px) 
      and (-webkit-min-device-pixel-ratio: 2) {
        .banner-with-mask .banner-content {
            background: linear-gradient(to right, rgba(68, 29, 32, 0.7) 50%, transparent 30%) !important;
        }
    }
    Avatar: Olga Barlow
    Olga Barlow
    Support staff
    January 27, 2022 at 12:37

    Hello,

    It works https://prnt.sc/26k47oh Don’t understand your issue with this code.

    Regards

  • Viewing 6 results - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.Log in/Sign up

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.