2

I tried setting two different styles for a website using @media. But it always loads the desktop view no matter if I use a phone or a computer.

/* desktop screen */
@media (min-width: 801px){
   content desktop
}
    
/* mobile screen */
@media (max-width: 800px){
  content mobile
}

What have I done wrong?

Progaros
  • 45
  • 1
  • 12

3 Answers3

1

The actual answer to your question is: you're using width and device-width wrong. Change line #169 from:

@media (max-device-width: 800px){

to:

@media (max-width: 800px){

If you want to target phones specifically, it is a good idea to look at media queries used by popular frameworks such as bootstrap or foundation. You'll find that many target much smaller sizes such as 320px or 480px as opposed to 800px in your code.

Serg Chernata
  • 12,280
  • 6
  • 32
  • 50
0

The thing is CSS media queries distinguish features not devices. So you can try to figure out which features correspond to the device you want to refer to. In this site you have media queries for iPhones, iPads. So for example:

iPhone 6 in portrait & landscape:

@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 667px) { /* STYLES GO HERE */}

These queries try to reduce the case to get to an specific device using its features. In this site you have a set of predefined queries for specific devices.

But notice that the difference between Desktop and Mobile might not be so obvious.

Alvaro
  • 9,247
  • 8
  • 49
  • 76
0

And don't forget to add meta in to <head></head> 

<meta content="width=device-width" name="viewport" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0" />
bulldozer
  • 101
  • 10
  • These are both metas with the same name. Are they alternatives or why did you put them both, once "content" first, once "name" first? – Tilman Vogel Nov 02 '22 at 15:21