@media code is not working for responsive design

Hi dear Theme.Co Team,

I have added some css code to have a responsive design.

When I write:
/*
##Device = Most of the Smartphones Mobiles (Portrait)
##Screen = B/w 320px to 479px
*/
@media (min-width: 320px) and (max-width: 480px) {

It perfectly works but when I add the next part for larger screens, they do not work even if it is the same code:
/*
##Device = Low Resolution Tablets, Mobiles (Landscape)
##Screen = B/w 481px to 767px
*/
@media (min-width: 481px) and (max-width: 767px) {

And so on…

So if I copy paste the code from small screen to larger screen, I cant see any change on the larger screen.
Have deactivated cache. The code must be alright, because its working on smaller screen and without “@media…”

this normally works fine.

Hello Nudu,

Thanks for writing to us.

I checked your website and I found that there is some syntax error in your other custom CSS code. You must check the Custom CSS code issue from here

As you can see above you have added extra closing curly bracket( } ) in your custom CSS code

I want ahead and checked your custom CSS code in CSSLINT I found these error in your custom CSS code.

Thanks

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.