title: CSS problem, my website is'n responsive to cellphones
body: <p>How to make my code responsive to cellphones like this image?</p>
  <p><a href="https://i.stack.imgur.com/XNDfQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XNDfQ.png" alt="enter image description here" /></a></p>
  <p>Using the same cellphone Galaxy s5, in my website, shows this:</p>
  <p><a href="https://i.stack.imgur.com/veHTP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/veHTP.png" alt="enter image description here" /></a></p>
  <p>I think is because a CSS issue, maybe this person from the tutorial has a different version from visual studio code</p>
  <p>Btw the first image is from a YouTube channel tutorial, and I wrote the same exact code</p>
  <p>This is my code:</p>
  <p>Html</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
      &lt;meta charset=&quot;UTF-8&quot;&gt;
      &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;style.css&quot;&gt;
      &lt;script defer src=&quot;https://use.fontawesome.com/releases/v5.15.4/js/all.js&quot; integrity=&quot;sha384-rOA1PnstxnOBLzCLMcre8ybwbTmemjzdNlILg8O7z1lUkLXozs4DHonlDtnE7fpc&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
      &lt;title&gt;Admin panel&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class=&quot;container&quot;&gt;
          &lt;div class=&quot;topbar&quot;&gt;
              &lt;div class=&quot;logo&quot;&gt;
                  &lt;h2&gt;Pomodone&lt;/h2&gt;
              &lt;/div&gt;
              &lt;div class=&quot;search&quot;&gt;
                  &lt;input type=&quot;text&quot; id=&quot;search&quot; placeholder=&quot;search here&quot;&gt;
                  &lt;label for=&quot;search&quot;&gt;&lt;i class=&quot;fas fa-search&quot;&gt;&lt;/i&gt;&lt;/label&gt;
              &lt;/div&gt;
              &lt;i class=&quot;fas fa-bell&quot;&gt;&lt;/i&gt;
              &lt;div class=&quot;user&quot;&gt;
                  &lt;img src=&quot;img/user.png&quot; alt=&quot;&quot;&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class=&quot;sidebar&quot;&gt;
              &lt;ul&gt;
                  &lt;li&gt;
                      &lt;a href=&quot;#&quot;&gt;
                          &lt;i class=&quot;fas fa-th-large&quot;&gt;&lt;/i&gt;
                          &lt;div&gt;Dashboard&lt;/div&gt;
                      &lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a href=&quot;#&quot;&gt;
                          &lt;i class=&quot;fas fa-user-graduate&quot;&gt;&lt;/i&gt;
                          &lt;div&gt;Students&lt;/div&gt;
                      &lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a href=&quot;#&quot;&gt;
                          &lt;i class=&quot;fas fa-chalkboard-teacher&quot;&gt;&lt;/i&gt;
                          &lt;div&gt;Teachers&lt;/div&gt;
                      &lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a href=&quot;#&quot;&gt;
                          &lt;i class=&quot;fas fa-users&quot;&gt;&lt;/i&gt;
                          &lt;div&gt;Employees&lt;/div&gt;
                      &lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a href=&quot;#&quot;&gt;
                          &lt;i class=&quot;fas fa-chart-bar&quot;&gt;&lt;/i&gt;
                          &lt;div&gt;Analytics&lt;/div&gt;
                      &lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a href=&quot;#&quot;&gt;
                          &lt;i class=&quot;fas fa-hand-holding-usd&quot;&gt;&lt;/i&gt;
                          &lt;div&gt;Earnings&lt;/div&gt;
                      &lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a href=&quot;#&quot;&gt;
                          &lt;i class=&quot;fas fa-cog&quot;&gt;&lt;/i&gt;
                          &lt;div&gt;Settings&lt;/div&gt;
                      &lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a href=&quot;#&quot;&gt;
                          &lt;i class=&quot;fas fa-question&quot;&gt;&lt;/i&gt;
                          &lt;div&gt;Help&lt;/div&gt;
                      &lt;/a&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
          &lt;div class=&quot;main&quot;&gt;
              &lt;div class=&quot;cards&quot;&gt;
                  &lt;div class=&quot;card&quot;&gt;
                      &lt;div class=&quot;card-content&quot;&gt;
                          &lt;div class=&quot;number&quot;&gt;1217&lt;/div&gt;
                          &lt;div class=&quot;card-name&quot;&gt;Students&lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class=&quot;icon-box&quot;&gt;
                          &lt;i class=&quot;fas fa-user-graduate&quot;&gt;&lt;/i&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class=&quot;card&quot;&gt;
                      &lt;div class=&quot;card-content&quot;&gt;
                          &lt;div class=&quot;number&quot;&gt;42&lt;/div&gt;
                          &lt;div class=&quot;card-name&quot;&gt;Teachers&lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class=&quot;icon-box&quot;&gt;
                          &lt;i class=&quot;fas fa-chalkboard-teacher&quot;&gt;&lt;/i&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class=&quot;card&quot;&gt;
                      &lt;div class=&quot;card-content&quot;&gt;
                          &lt;div class=&quot;number&quot;&gt;68&lt;/div&gt;
                          &lt;div class=&quot;card-name&quot;&gt;Employees&lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class=&quot;icon-box&quot;&gt;
                          &lt;i class=&quot;fas fa-users&quot;&gt;&lt;/i&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class=&quot;card&quot;&gt;
                      &lt;div class=&quot;card-content&quot;&gt;
                          &lt;div class=&quot;number&quot;&gt;$4500&lt;/div&gt;
                          &lt;div class=&quot;card-name&quot;&gt;Earnings&lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class=&quot;icon-box&quot;&gt;
                          &lt;i class=&quot;fas fa-dollar-sign&quot;&gt;&lt;/i&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class=&quot;charts&quot;&gt;
                  &lt;div class=&quot;chart&quot;&gt;
                      &lt;h2&gt;Earnings (past 12 months)&lt;/h2&gt;
                      &lt;canvas id=&quot;lineChart&quot;&gt;&lt;/canvas&gt;
                  &lt;/div&gt;
                  &lt;div class=&quot;chart&quot; id=&quot;doughnut-chart&quot;&gt;
                      &lt;h2&gt;Employees&lt;/h2&gt;
                      &lt;canvas id=&quot;doughnut&quot;&gt;&lt;/canvas&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;  
      &lt;/div&gt;
      &lt;script src=&quot;https://cdn.jsdelivr.net/npm/chart.js@3.8.0/dist/chart.min.js&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;chart.js&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;chart2.js&quot;&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>CSS</p>
  <pre><code>*{
      padding: 0;
      margin: 0;
      box-sizing: border-box;
      font-family: 'poppins', sans-serif;
  }
  .topbar{
      position: fixed;
      background: #fff;
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.08);
      width: 100%;
      height: 60px;
      padding: 0 20px;
      display: grid;
      grid-template-columns: 2fr 10fr 0.4fr 1fr;
      align-items: center;
      z-index: 1;
  }
  .logo h2{
      color: #d34d4d;
  }
  
  .search{
      position: relative;
      width: 60%;
      justify-self: center;
  }
  
  .search input{
      width: 100%;
      height: 40px;
      padding: 0 40px;
      font-size: 16px;
      outline: none;
      border: none;
      border-radius: 10px;
      background: #f5f5f5;
  }
  
  .search &gt;label {
      position: absolute;
      right: 15px;
      top: 50%;
      transform: translateY(-50%);
  }
  
  .user{
      position: relative;
      width: 50px;
      height: 50px;
  }
  .user img{
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      object-fit: cover;
  }
  
  /* sidebar starts here */
  
  .sidebar{
      position: fixed;
      top: 60px;
      width: 260px;
      height: calc(100% - 60px);
      background: #e26666;
      overflow-x: hidden;
  }
  
  .sidebar ul {
      margin-top: 20px;
  }
  
  .sidebar ul li{
      width: 100%;
      list-style: none;
  }
  .sidebar ul li:hover{
      background: #fff;
  }
  .sidebar ul li:hover a{
      color: #e26666;
  }
  
  .sidebar ul li a {
      width: 100%;
      text-decoration: none;
      color: rgb(255, 255, 255);
      height: 60px;
      display: flex;
      padding-left: 30px;
      justify-content: flex-start;
      align-items: center
    }
    
  .sidebar ul li a i {
      min-width: 60px;
      font-size: 24px;
      text-align: center;
      align-self: flex-start;
  }
  .sidebar ul li a svg{
      margin-right: 15px;
      width: 25px !important;
  }
  
  /* main section starts here*/
  .main {
      position: absolute;
      top: 60px;
      width: calc(100% - 260px);
      left: 260px;
      min-height: calc(100vh - 60px);
      background: #f3f3f3;
  }
  .cards{
      width: 100%;
      padding: 35px 20px;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-gap: 20px;
  }
  .cards .card{
      padding: 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: #fff;
      border-radius: 10px;
      box-shadow: 0 7px 25px 0 rgb(0, 0, 0, 0.08);
  }
  .cards .card:hover{
      background: #e26666;
  }
  .cards .card:hover .number{
      color: #fff;
  }
  
  .cards .card:hover .card-name{
      color: #fff;
  }
  
  .cards .card:hover .icon-box i{
      color: #fff;
  }
  
  .cards .card:hover .icon-box svg{
      color: #fff;
  }
  
  .number{
      font-size: 35px;
      font-weight: 500;
      color: #e26666;
  }
  
  .card-name{
      color: #888;
      font-weight: 600;
  }
  .icon-box svg,
  .icon-box i {
      font-size: 45px;
      color: #e26666;
  }
  /* charts starts here */
  
  .charts{
      display: grid;
      grid-template-columns: 2fr 1fr;
      grid-gap: 20px;
      width: 100%;
      padding: 20px;
      padding-top: 0;
  }
  .chart{
      background: #fff;
      padding: 20px;
      border-radius: 10px;
      box-shadow: 0 7px 25px 0 rgb(0, 0, 0, 0.08);
      width: 100%;
  }
  
  .chart h2{
      margin-bottom: 5px;
      font-size: 20px;
      color: #666;
      text-align: center;
  }
  
  /* Responsive starts here */
  @media (max-width:1115px) {
      .sidebar{
          width: 60px;
      }
      .main{
          left: 60px;
          width: calc(100% - 60px);
      }   
  }
  @media (max-width:880px) {
      .cards{
          grid-template-columns: repeat(2, 1fr);
      }
      .charts{
          grid-template-columns: 1fr;
      }
      #doughnut-chart{
          padding: 50px;
      }
      #doughnut{
          padding: 50px;
      }
  }
  @media (max-width:500px){
      .topbar{
          grid-template-columns: 1fr 5fr 0.4fr 1fr;
      }
      .cards{
          grid-template-columns: 1fr;
      }
      .logo h2{
          font-size: 20px;
      }
      .search{
          width: 80%;
      }
      .search input{
          padding: 0 20px;
      }
      .fa-bell{
          margin-right: 5px;
      }
      .user{
          width: 40px;
          height: 40px;
      }
      #doughnut-chart{
         padding: 10px; 
      }
      #doughnut{
          padding: 0;
      }
  }
  </code></pre>
  <p>chart.js</p>
  <p>line chart</p>
  <pre><code>const ctx = document.getElementById('lineChart').getContext('2d');
  const myChart = new Chart(ctx, {
      type: 'line',
      data: {
          labels: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec',],
          datasets: [{
              label: 'Earnings in $',
              data: [2500,3452,1526,5500,1278,2500,2500,3000,4000,3300,2600,2800],
              backgroundColor: [
                  'rgba(255, 99, 132, 0.2)',
                  'rgba(54, 162, 235, 0.2)',
                  'rgba(255, 206, 86, 0.2)',
                  'rgba(75, 192, 192, 0.2)',
                  'rgba(153, 102, 255, 0.2)',
                  'rgba(255, 159, 64, 0.2)'
              ],
              borderColor: [
                  'rgba(255, 99, 132, 1)',
                  'rgba(54, 162, 235, 1)',
                  'rgba(255, 206, 86, 1)',
                  'rgba(75, 192, 192, 1)',
                  'rgba(153, 102, 255, 1)',
                  'rgba(255, 159, 64, 1)'
              ],
              borderWidth: 3
          }]
      },
      options: {
          responsise: true,
      
      }
  });
  </code></pre>
  <p>doughnut chart</p>
  <pre><code>const ctx2 = document.getElementById('doughnut').getContext('2d');
  const myChart2 = new Chart(ctx2, {
      type: 'doughnut',
      data: {
          labels: ['Academic', 'Non academic', 'Administration', 'Others'],
          datasets: [{
              label: 'Employees',
              data: [42, 12, 8, 6],
              backgroundColor: [
                  'rgba(255, 99, 132, 0.2)',
                  'rgba(54, 162, 235, 0.2)',
                  'rgba(255, 206, 86, 0.2)',
                  'rgba(75, 192, 192, 0.2)',
                  'rgba(153, 102, 255, 0.2)',
                  'rgba(255, 159, 64, 0.2)'
              ],
              borderColor: [
                  'rgba(255, 99, 132, 1)',
                  'rgba(54, 162, 235, 1)',
                  'rgba(255, 206, 86, 1)',
                  'rgba(75, 192, 192, 1)',
                  'rgba(153, 102, 255, 1)',
                  'rgba(255, 159, 64, 1)'
              ],
              borderWidth: 1
          }]
      },
      options: {
          responsive: true
      }
  });
  </code></pre>
  <p>Thank you in advance</p>