CSS Media Queries Properties Tutorial

Html copy reset ☀ Lights Netbax Online Editor Try it Yourself Run

.main {margin-left: 4px;}

.bar {
  float: none;
  width: auto;
}

.list {
  margin: 0;
  padding: 0;
}

.menu {
  background: #c00;
  border: 1px solid #000;
  border-radius: 4px;
  list-style-type: none;
  margin: 4px;
  padding: 2px;
color:#fff;
}

@media screen and (min-width: 280px) {
  .bar {width: 100px; float: left;}
  .main {margin-left: 116px;}
}
</style>

<div class="content">
<div class="bar">
    <ul class="list">
      <li class="menu">Menu-1</li>
      <li class="menu">Menu-2</li>
      <li class="menu">Menu-3</li>
      <li class="menu">Menu-4</li>
      <li class="menu">Menu-5</li>
      <li class="menu">Menu-6</li>
      <li class="menu">Menu-7</li>
    </ul>
</div>
  
  <div class="main">
    <h2>@media screen</h2>
    <p>Contrary to popular belief, Lorem Ipsum. Quem num gosta di mé, boa gentis num é.  Quem manda na minha terra sou euzis!  Mais vale um bebadis conhecidiss, que um alcoolatra anonimis.  Todo mundo vê os porris que eu tomo, mas ninguém vê os tombis que eu levo! </p>
  </div>
</div>