Home>

html - responsive design is not reflected

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.

Supplemental information (FW/tool version etc.)

Please provide more information here.

html css responsivewebdesign
  • Answer # 1

    If you put a space after

    screen and, it will be reflected.

  • 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