Responsive design tips in CSS

• Use below meta tag in head element

  
  <meta name="viewport" content="width=device-width,intial-scale=1">
  
  

• Using css frameworkIf you are using framework like bootstrap, you do not need to worry about responsive web design as bootstrap framework is already responsive. But in most of the projects, you will need to write css from scratch. So read on next tips on how to make your website responsive.
• Use modern techniques like flex and grid to create website layouts. If you are using flex, ensure that flex-wrap prop is set to wrap.
• Use media queries to adjust layout based on viewport size
• While media queries are helpful, one of the drawback is that you need to write different css for each viewport breakpoint. But do not lose heart. You can avoid writing media queries and still achieve responsive design using techniques like relative units (em, rem, vw, vh, %). clamp function also allows you to remove media queries.
• Use modern css functions like clamp, min, max. https://utopia.fyi/type/calculator?c=320,21,1.2,1140,24,1.25,5,2,&s=0.75%7C0.5%7C0.25,1.5%7C2%7C3%7C4%7C6,s-l

  
  h1 {
      font-size:clamp(2rem, 1rem + 10vw, 7rem);
  }
  
  img{
      width:100%;
      height:auto;
  
  }
  
  .container {
      padding : 0 1em;
  }
  .text-center{
      text-align:center;
  }
  
  section {
      padding: 4rem 0;
  }
  
  

• set margin as 0 for body, h1,h2,h3,p
• Avoid fixed sizes. e.g. width set to 800px. Instead use max-width, max-height, min-width, min-height. Width property works on certain viewport width. But on smaller devices, page will look like broken.
• Container can have below css.

  
  .container{
      width: min(90%, 1000px);
      /* left and right margin is set to auto using margin-inline   
      margin-inline:auto;
  }
  
  .container div{
      /*responsive padding*/
      padding: max(3vh, 1rem) 1.5rem;
  }
  
  h2{
      font-size : clamp(1 rem, 10vw + 1 rem, 5rem);
  }
  
  

• Before writing css, think about how it will look on desktop, mobile and tablets.
• Start with mobile version of website first and then add media queries to adapt to larger screens.
• Use overflow - https://blog.logrocket.com/how-to-prevent-overflow-scrolling-css/
• Use box-sizing set to border-box. With border-box, when you use 100% width, child's width will be equal to parent's content area + padding.
• Use this css to make image responsive.

  
  img {width:100%;height:auto;}