Question 209508 in Html Question posted in
Some basic documentation can be found here.

Html – css giving me errors and i don't understand why when using media screen

 `@media screen and (max-width: 960px) {
display: flex;
justify-content: spacebetween;
height: 80px;

}`

whilst folloiwng a tutorial from brian design as a someone who is trying to learn web development i came across this error which states constantly says my code is invalid giving me errors.For eacho f these erros it says that i should be using a curly bracked on line 2,3,4 but i don’t understand why as the code above it is fine but this one has a problem.I have tried looking online to go find an answer and even read some documentation but i still am struggling to find out the route cause of this problem could someone help me

Tags:

4

Answers


  1. 0

    A rule (a property with a value) must be contained in a ruleset (a selector followed by { then some rules then }).

    A ruleset can appear inside or outside of a media query.

    Your media query contains rules directly without the required ruleset. (You might be trying to put the media query in a ruleset, which also isn’t allowed).

    Login or Signup to reply.
  2. 0

    you need to specify on which element or class you’re adding this css

    Login or Signup to reply.
  3. 0

    The error you’re facing is due to a syntax issue in your CSS code. Specifically, in the @media query, you have used the value spacebetween for the justify-content property. However, there is no valid value called spacebetween. The correct keyword is space-between, with a hyphen between "space" and "between".

    Here’s the corrected version of your code:

    @media screen and (max-width: 960px) {
  display: flex;
  justify-content: space-between;
  height: 80px;
}

    Make sure to use the correct CSS property values as specified in the CSS specifications or documentation.

    Login or Signup to reply.
  4. 0

    you need to select the element you want to style too:

     @media screen and (max-width: 960px) {
    .some-element-you-want-to-style {
        display: flex;
        justify-content: space-between;
        height: 80px;
     }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search