Adding specific styles for small screens

i learned once i have basic styles for all devices in a style sheet, i understand i need to add styles specific to smallest screens. i read i should put them below my style for all devices but
NOT INSIDE A MEDIA QUERY

here i am lost.

kindly explain: i should put them below my style for all devices but
NOT INSIDE A MEDIA QUERY

I get These styles will be over written by the styles in the media query

I understand whatever styles come last will take precedence over styles that come before

maybe give an example to help me?

anything you can do to help is appreciated!!!

To the best of the knowledge that is not possible.

For example, in this instance, the <p> elements will be green regardless of the size of the browser:

@media (max-width: 500px) {
  p {
    color: red;
  }
}

p {
  color: green;
}

However if you reverse it:

p {
  color: green;
}

@media (max-width: 500px) {
  color: red;
}

Than the <p> element will only be green if the media query evaluates to false.
Perhaps I am missing something here. Did you read this in a lesson?

I just completed that lesson and didn’t notice any text saying not inside a media query.

For example in this lesson, there’s a step saying:

At the bottom of style.css , write a media query for a max-width of 480px .
This will allow us to shrink the width of the .page-title element on smaller screens.

None of the other exercises explicitly mention to add it at the bottom.

1 Like