Responsive css always applying landscape

Question

I'm trying to understand why my css is always applying the h1 font size in landscape instead of portrait when I am in portrait (I'm a noob in responsive design).

Anyone have an idea of what I'm doing wrong ?

Thank you !

Guillaume **** edited new version: now working.

/* FOR MOBILE */
@media only screen 
and (            max-device-width: 736px){
.coursBox1{
 /* Useless CSS */
}
.coursBox1 h1{
 /* Useless CSS */
}
}
@media only screen 
and (            max-device-width: 736px)
and (              orientation: portrait){
.coursBox1 h1{
    font-size: 10px;
}
}
@media only screen 
and (            max-device-width: 736px)
and (              orientation: landscape){
.coursBox1 h1{
    font-size: 100px;
}
}

Answer 1

You have some errors in your code. You don't use , in between logical operators. You're also missing a closing }. Also, your media queries are very specific due the and operator.

As a beginner, I would drop the logical operators and only work with the device-width property as this the key value in triggering your queries. Once you understand how this works in your browser, start adding the logical operators.

If you are looking to make adjustments to your font-size or anything else for mobile devices such as tablets and smaller, then you can use something similar:

/* This generally targets both tablets and phones */
@media (max-width: 1024px) {
  h1 {
    font-size: 21px;
  }
  // other styles targeted to tablet/phone devices
}

/* This generally targets phones sizes and smaller */
@media (max-width: 768px) {
  h1 {
    font-size: 18px;
  }
  // other styles targeted to phone devices
}

This is just a guideline.

See these resources for a range of devices out in the wild with their corresponding sizes: - http://viewportsizes.com/ - http://www.mydevice.io/devices/

and some some pre-made media query snippets - Media Query Standard Devices

CSS media queries - MDN