Responsive Website

Responsive Design Strategies

  @media (min-width: 60rem) {
    #product-overview {
      height: 50vh;
      background-position: 50% 25%;
    }

    #product-overview h1  {
      font-size: 5rem;
    }
  } 

Selecting our Breakpoints: A Good Approach

Screen Resolution Stats Worldwide - Statcounter GlobalStats

About Viewport Meta-tag

• Should be added to your HTML files to adjust the viewport to device size
• Converts hardware pixels into software pixels and therefore takes into account the actual device width

1. Setting the Viewport Meta Tag - Noble Desktop
2. Responsive Meta Tag - CSS Tricks
3. A Beginner’s Guide to Viewport Meta Tags - Semrush