CODEWITHSUNDEEP
cssviewportw3c-validationparse-error
Linda Littleton Gray
Linda Littleton Gray

Reputation: 1

CSS3 Viewport parse error

I have tried changing the bracket to different positions. The following piece of code from my CSS3 is not accepted by the W3C CSS Validator. Would someone please help me identify where the parsing error is in the following piece of code?

Many thanks!

@media (min-width: 300px) {
     @viewport {
         width: 300px;
     }
}

Upvotes: 0

Views: 483

Answers (2)

Abhishek Mishra
Abhishek Mishra

Reputation: 192

Add meta in the head section of your html.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

And your CSS should be like this

@media only screen and (max-width : 500px) {
  div {
    width: 300px;
  }
}

Upvotes: 1

Obsidian Age
Obsidian Age

Reputation: 42304

You cannot nest a @viewport at-rule inside a media query. A media query controls how elements look on the page at certain widths, and @viewport is a fallback for <meta name="viewport">. @viewport should be outside of the media query, at the base level of your CSS.

Having said that, @viewport is only relevant when dealing with Internet Explorer's 'snapped mode' on Windows 8 or Windows 10. Considering how little difference it would make, you can pretty much safely ignore it entirely unless you're doing very optimised label controls for specific browsers and operating systems.

Setting a META viewport of <meta name="viewport" content="width=device-width, initial-scale=1"> is enough to handle the various different browsers on mobile devices.

Assuming you are simply trying to adjust an element on the page, you can simply target it directly with the discrepancies when dealing with the various browsers. You can then simply rely on regular media queries to style the page at different widths:

@media screen and (min-width: 300px) {
  #id {
    width: 300px;
  }
}

Hope this helps! :)

Upvotes: 1

Related Questions