Media Queries in CSS

Website looking great on desktop may look broken on mobile devices. So we need to different css for different viewports. To make websites responsive, you need to use media queries. You need to use below tag to make media query work and overall responsiveness of website.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

It is recommended to design the website in such a way that it looks great on mobile first. It is called as mobile first approach. Once mobile development is done. We can add media queries to change the look and feel of website for larger viewport like iPads, laptops and desktops etc. In below example, we are removed hamburger menu from all viewports larger than 720px.

 @media (min-width: 720px) {
  .hamburgerMenu{
    display:none;
  }
}