Return to previous page

WPBakery Hover Box does not display properly on Mobile

This topic has 6 replies, 2 voices, and was last updated 4 years, 3 months ago ago by Rose Tyler

  • Avatar: Cover Lovers
    Cover Lovers
    Participant
    March 19, 2021 at 20:14

    I’ve tried changing the responsive settings but nothing seems to work.

    It does not scale properly on Mobile and shows up too big

    Here's a screenshot of it on mobile

    #280188 Copied Theme version: 7.2.6 WooCommerce version: 5.7
    5 Answers
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    March 20, 2021 at 09:39

    Hello,

    Provide URL of page, that contains the mentioned element, and temporary wp-admin access, so we can take a closer look.

    Regards

    #280229 Copied
    Avatar: Cover Lovers
    Cover Lovers
    Participant
    March 20, 2021 at 18:48

    Url of the page is: https://www.coverlovers.ca/our-case-types/

    Please contact administrator
    for this information.
    #280271 Copied
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    March 21, 2021 at 08:20

    Hello,

    Add the next code in custom CSS for page:

    @media (max-width: 1200px){
    .vc-hoverbox-wrapper .vc-hoverbox-inner {
        min-height: 300px !important;
    }
    .vc-hoverbox-wrapper .vc-hoverbox {
        height: 300px;
    }
}

    http://prntscr.com/10rfn1d

    Regards

    #280289 Copied
    Avatar: Cover Lovers
    Cover Lovers
    Participant
    March 21, 2021 at 18:09

    It fixed it but now when I click the elements, the text is scaled wrong too.

    Here's what it looks like when I click the element

    #280357 Copied
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    March 22, 2021 at 09:45

    Hello,

    Change this code http://prntscr.com/10sacu2 to

    @media (max-width: 1200px){
    .vc-hoverbox-wrapper .vc-hoverbox-inner {
        min-height: 300px !important;
    }
    .vc-hoverbox-wrapper .vc-hoverbox {
        height: 300px;
    }
    .vc-hoverbox-block-inner p {
        font-size: 10px !important;
        padding: 5px 0;
        margin-bottom: 0;
    }
}

    Regards

    #280392 Copied
  • Viewing 6 results - 1 through 6 (of 6 total)

The issue related to '‘WPBakery Hover Box does not display properly on Mobile’' has been successfully resolved, and the topic is now closed for further responses

Helpful Topics

Unleash your online potential

Explore our best WordPress WooCommerce Themes collection

lazy-placeholder
Animals Store – WooCommerce Theme
lazy-placeholder
Cosmetics Store – WordPress WooCommerce Theme
lazy-placeholder
Fashion Store – WordPress WooCommerce Theme
lazy-placeholder
Organic Store – WordPress WooCommerce Theme
lazy-placeholder
Beaty & Cosmetics – WordPress WooCommerce Theme
lazy-placeholder
Language Courses – WordPress WooCommerce Theme
lazy-placeholder
School – WordPress Theme
lazy-placeholder
Watches Store – WooCommerce Theme
lazy-placeholder
Minimalist Outfits – WordPress WooCommerce Theme
lazy-placeholder
Hosting Store – WordPress WooCommerce Theme

See All Templates

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