Problem with modules on mobile, tablets and desktop

We use Gavick university here: https://www.frenchwinesociety.org/membe ... rship.html

In the page, we have 2 loadposition modules:

<div class="nomobile notablet">{loadposition benef}</div>
<div class="onlytablet onlymobile">{loadposition benef1}</div>

One module should be only for Desktop, one only for mobile and tablet.

When we have a screen bigger than 1024 pix, we do have the good module showing.

When we are on a phone screen (up to 767 pix) we have the good module for mobile and small tablets

But when the screen is between 1040 and 768, no module shows.

We have tried to fix this a lot but are not able to. I hope you can help!

Thank you,

Julien

Actually it works exactly as it is designed. If you use 2 classes where one excludes the other the problem will occur. You can easily fix that...
Please edit: /templates/gk_university/css/override.css and add at its end:

Code: Select all

@media (max-width: 1040px) {
    .onlymobile.onlytablet {
        display: block!important;
    }
}


Remember to enable "CSS override" in template settings - advanced section.