Home>
Media query is not reflected.
I wrote the following code to practice responsive design, but it is not reflected in chrome at all.
I would appreciate it if you could tell me the cause.
Error message
Applicable source code
<! DOCTYPE html>
<html lang = "en" dir = "ltr">
<head>
<meta charset = "utf-8">
<title>practice</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1.0, maximum-scale = 1.0, minimum-scale = 1.0">
<link rel = "stylesheet" type = "text/css" href = "main.css">
<link rel = "stylesheet" type = "text/css" href = "responsive.css" media = "screen and (max-width: 900px)">
</head>
<body>
Example Header
<ul>
<li>home</li>
<li>about</li>
<li>SampleLink1</li>
<li>SampleLink2</li>
<li>SampleLink3</li>
<li>SampleLink4</li>
<li>portlate</li>
<li>content</li>
</ul>
Section1
<p>kjdfkjdfkjddkjdfkjdfkjdkjjdffkjdf</p>
Section2
<p>jdkjdfkjdfkjdfkjdfkjdfkjdkjdfkjdfkjdkjdffkjdf</p>
Section3
<p>kjdfkjjdfkjdkjdfkjdfkjdkjdffkjjdkjdfkfkjdf</p>
</body>
</html>
responsive.css
.section {
width: 47.5%;
}
Because it was not reflected in responsive.css, add it to main.css
@media screen and (max-width: 900px) {
.section {
width: 47.5%;
}
}
Although there was no change in the output destination.
Please provide more information here.
-
Answer # 1
-
Answer # 2
@ media screen and (max-width: 900px) { ↓ @media screen and (max-width: 900px) {
A half-width space is required after and.
I remember getting into the same mistake when I was studying.
Related articles
- html - [css] css responsive design is not reflected
- html - pros and cons of using "display:none" in responsive design
- html - i don't know how to use responsive design column-reverse
- html - when performing responsive design, a mysterious void is created
- html - i want to create a responsive design using bootstrap
- html - site production responsive design procedure
- html - responsive web design size
- html - after setting the responsive design meta, the notation on the iphone became strange
- html - responsive design when i move the screen, the elements do not move
- html - how to write code when you want to combine responsive design css into scss
- html - [apply responsive design] i want to center the text in the submit button
- how to design using scss for multiple html
- html - vscode css is not reflected
- html - responsive | elements overhang
- ccs is not reflected in the html file
- html - overlapping of responsive images and characters
- html - responsive support makes the navi part vertical
- [html/css] i don't know how to implement this design [with image]
- html - about the description method of css reflected only in ie
- html - responsive doesn't respond
Related questions
- javascript : How to fix conflict of two JS events
- javascript : Changing text as animation in HTML via JS
- html : With a margin of a margin, and a margin of
- python : How are certificates for sites and applications arranged? [closed]
- javascript : How to implement an additional block for table rows?
- html : How to display blocks to the full width of the user's screen?
- html : "Rubber" triangle depending on div height
- html : Place a block outside the page boundary
- javascript : How do I customize a modal window?
- html : How to transform the background of a block on hover over a menu item
If you put a space after
screen and
, it will be reflected.