I am unable to style a page using max-width media query

user_14022570 0
Viewed 43

I am practicing to code. Trying to make the grubhub webpage. Having trouble with the max-width media query.

Below is my code

  @media (max-width: 800px) {
    div.displayFood h2 {
      font-size: 3rem;
    }
    .order {
      display: flex;
      flex-direction: column-reverse;
    }
  }

I understood that it's a lot of codes. Appreciate any help.

display flexbox media-queries css
2 Answers

You have a missed close bracket on class .hide

This is the reason why nothing works after this class

.hide {
  display: none;
} /*<---- this is missing*/
  
@media (min-width: 800px) {
  .hero {
    flex-wrap: nowrap;
  }
}
user_109681340

Media Query for device width < 800px would be@media only screen and (max-width: 800px) {...}

user_101180500
Related