CODEWITHSUNDEEP
cssvalidation
Fabio
Fabio

Reputation: 237

How to fix css errors for min-device-width and max-device-width

using the online CSS validator I am trying to validate the CSS of my page but I received the following 2 error messages:

Unknown error org.w3c.css.parser.analyzer.ParseException: Deprecated media feature “min-device-width”. For guidance, see the Deprecated Media Features section in the current Media Queries specification.

Unknown error org.w3c.css.parser.analyzer.ParseException: Deprecated media feature “max-device-width”. For guidance, see the Deprecated Media Features section in the current Media Queries specification.

    @media only screen
  and (min-device-width : 375px)
  and (max-device-width : 667px) {
        body { font-size: 9.5pt; }
        div.content { width: 96ex; margin: 0; }
    }
@media only screen
  and (min-device-width: 1200px) {
        body { font-size: 10pt; margin: 0 4em; }
        div.content { width: 96ex; margin: 0; }
    }

How can I recode the above css to make it pass the validation?

Thank you so much.

Upvotes: 0

Views: 2263

Answers (1)

Edwin Alwin
Edwin Alwin

Reputation: 217

No need to use "min-device-width"

@media only screen and (min-width: 375px) and (max-width: 667px) {
  body {
    font-size: 9.5pt;
  }
  div.content {
    width: 96ex;
    margin: 0;
  }
}
@media only screen and (min-width: 1200px) {
  body {
    font-size: 10pt;
    margin: 0 4em;
  }
  div.content {
    width: 96ex;
    margin: 0;
  }
}

Upvotes: 3

Related Questions