0

I am currently using @media only screen and (max-width:1000px) {} for device compatible css for my website which worked on phones after upload but not on a small monitor pc (around 1200px width). It supposedly was working on my home pc when I adjusted the width of the browser. Is the syntax line correct?

Muaaz
  • 21
  • 7
  • Welcome to SO. You must share your code with css to find the solution – Saravana Apr 19 '19 at 06:40
  • You can find the common media queries for devices over here - [Refer](https://css-tricks.com/snippets/css/media-queries-for-standard-devices/) – Salvatore Apr 19 '19 at 06:52

2 Answers2

1

This line was missing from the head

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Along with that was browser cache to add to the misery of my CSS life.

Muaaz
  • 21
  • 7
0

Your media query might be overlapping. Try this below one 

@media screen (min-width: 800px) {
         //your style here !
    }

@media screen (min-width: 1200px) {
         //your style here !
    }
Khalid Khan
  • 3,017
  • 1
  • 11
  • 27
  • I tried, but certain elements of the mobile versions of lesser width were not able to override the primary design. – Muaaz May 25 '19 at 08:09