search

WennDann / f1-3-c2p1-colmar-academy

0 stars 0 forks source link

Adding viewport to <head> for mobile styling displaying #2

Closed griffinlacek closed 7 years ago

griffinlacek commented 7 years ago

If you do include mobile styles (using media queries), it is good practice to add the following line to your head when you're using media queries with width delimiters. This will ensure mobile styles will appear.

Adding this inside your HTML gave me your mobile styles.

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

Here's some further reading on this line. Check out the viewport sections.

https://developers.google.com/web/fundamentals/design-and-ui/responsive/

WennDann commented 7 years ago

@griffinlacek Thank you very much for this one. I was actually very disappointed when accessing the page on my mobile and not seeing the version that was meant to shop up, but the large one destinated to desktops. I thought that maybe the display have just gotten that much better and therefore not going down to small pixelnumbers. But I don't remember having seen the instruction about the viewport within the lessons. I do recall that there were some messages on slack about that subject, but I thought this is for something from the last unit. Maybe this should be included in future courses.