CSS media query: max device width

Asked Aug 04 '16 at 13:48

Active Aug 04 '16 at 13:54

Viewed 24 times

I am trying to hide a notice on devices whose max screen size is 1024. For all greater sizes the notice will be displayed. I use the following css code but it does not work. What I am doing wrong?

@media screen and (max-device-width : 1024px)
{
  .global-site-notice
   {
   display: none !important;
   }
 }

asked Aug 04 '16 at 13:48

Shakamal

1

max-width. try to use this. – Leo the lion Aug 04 '16 at 13:51
Check this one. https://jsfiddle.net/LeoLion/1eur854z/ – Leo the lion Aug 04 '16 at 13:54
I am testing this both on desktop browser and on mobile devices. I have also tried max-width. The website is the following: http://www.marsden-weighing.co.uk/. – Shakamal Aug 04 '16 at 14:07
1

What device is this not working on? I see it working fine on Chrome, with max-width instead of max-device-width. – Victoria Ruiz Aug 04 '16 at 14:19
Do you have the meta viewport tag in your header? – Vcasso Aug 04 '16 at 14:46

CSS media query: max device width

0 Answers0