Resposive Mobile and display: none - Wordpress - Visual Composer

Question

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

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;
}
}

JSfiddle please. Also, saying it doesn't work isn't specific enough. Write what you expect to happen, and what happens. — Daniel Springer, Nov 10 '16 at 22:44
i wanna off this div(exactly i mean background) with class "none" on mobile device and i cant :/ i use Visual Composer for Wordpress. — Grzegorz Mądroszyk, Nov 10 '16 at 22:50
SO users may be fluent in other languages, but the site is in English. If you can, get a friend to write the question more clearly for you. What other language do you know BTW? — Daniel Springer, Nov 10 '16 at 23:21

score 1 · Accepted Answer · edited May 23 '17 at 12:33

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.

Resposive Mobile and display: none - Wordpress - Visual Composer

1 Answers1