-3

I am new to css and try to learn responsive design. But my code does not work correctly.In mobile/tablet size it is looking like it is a pc screen. What is the problem?

Iphone x screen

#navbar {
  flex-direction: column;
  padding-top: 1rem;
  padding-bottom: 1rem;
}
<link rel="stylesheet" href="css/global.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" media="(max-width:768)" href="css/tablet.css">
<link rel="stylesheet" media="(max-width:500)" href="css/mobile.css">

<header>
  <div class="container">
    <nav id="navbar">
      <h1></h1>
      <ul>
        <li><a href="#home"> anasayfa</a></li>
        <li><a href="#training"> eğitimler</a></li>
        <li><a href="#courses"> dersler</a></li>
        <li><a href="#contact"> iletişim</a></li>
      </ul>
    </nav>
  </div>
</header>
ksav
  • 20,015
  • 6
  • 46
  • 66
asdfg
  • 27
  • 6

1 Answers1

0

See link media attribute

This attribute specifies the media that the linked resource applies to. Its value must be a media type / media query.

The media queries in the media attribute of your <link>s are not valid, as the widths need units. eg:

<link rel="stylesheet" media="(max-width:768px)" href="css/tablet.css">

Edit affectionate-field-tn957

ksav
  • 20,015
  • 6
  • 46
  • 66