wordpressvisual-composer

hover box responsive background css formatting - Visual Composer(wpbakery)

I have a hover box in a wp page with a background image. This is the page: https://mdipime.org/it/xii-capitolo-generale/. The hover box is the logo. It's ok for desktop and notebook view, but on mobile the background image is like that:

bakcground-hover-box

I tried to adjust with css responsive code in extra class module field. The class name is backg-mobile. I put the name here:

extra class name

and the css responsive code is this:

@media (max-width: 400px) {
   .backg-mobile {background-size: 120%; background-repeat: no-repeat;}
}

But it is not working because the background is in the inline element stile. The html block structure is this one:

<div class="vc-hoverbox-wrapper  backg-mobile vc-hoverbox-shape--rounded vc-hoverbox-align--center vc-hoverbox-direction--default vc-hoverbox-width--90">
  <div class="vc-hoverbox" style="perspective: 1242px;">
    <div class="vc-hoverbox-inner" style="min-height: 418.594px;">
      <div class="vc-hoverbox-block vc-hoverbox-front" style="background-image: url(https://mdipime.org/wp-content/uploads/2023/07/logo-xii-capitolo-ita.png);">
        <div class="vc-hoverbox-block-inner vc-hoverbox-front-inner">        
        </div>
      </div>
      ...
</div>

How can I solve this? Thank you any help.

Solution

  • The issue you're experiencing is due to the background image being set as an inline style.

    so you just need to update your css with this

    @media (max-width: 400px) {
   .backg-mobile .vc-hoverbox-front { background-size: 120% !important; background-repeat: no-repeat !important; }
}