Grzegorz Mądroszyk Grzegorz Mądroszyk - 1 month ago 9
CSS Question

Resposive Mobile and display: none - Wordpress - Visual Composer

Hello i have a problem with hide one row (exactly background) on mobile and tablet device i try give class to row : “none” and add css but this dont work on mobile (i check on http://mobiletest.me/samsung_galaxy_y_emulator/?u=http://htr-dabrowka.pl)

http://scr.hu/0wj8n/x00rp

@media screen and (max-device-width: 900px){
.none {
display: none !important;
visibility: hidden !important;
}
}

@media screen and (max-device-width: 900px){
.none {
background-image: none !important;
}
}

Answer

Your code should work on an actual phone/tablet. It doesn't work in these emulators because the max-device-width refers to the device width, not the width of the iframe window. In the emulator, the device is your computer, which almost certainly has a larger physical screen width than 900px. So, for development, use max-width instead:

@media screen and (max-width: 900px){
  .none {
    display: none !important;
  }
}

@media screen and (max-width: 900px){
  .none {
    background-image: none !important;
  }
}

On production, feel free to use max-device-width. More on this here.