Welcome to this tutorial, in this tutorial, we are going to make the YouTube Clone we have built a bit responsive.

How do we do it? Well, we will use CSS media query. Now, let get started!

So, we will add the CSS code below to the CSS file of the YouTube Clone.

 @media (max-width: 768px) {
    .side-bar {
      display: none;
    }
    .search {
      display: none;
    }
}

@media (max-width: 768px) { } is used to set the screen sizes the code in the media query would apply to. In this example, max-width: 768px means that the styles in the media query will be applied to any screen size that is equal or less than 768px.

So, whenever the screen size in use is 768px or less, we will hide the sidebar and the search input by setting their display property to none.

  @media (max-width: 900px) {
    .search input {
      width: 25rem;
    }
  }

Finally, we make the the search input a bit smaller whenever the screen size of the device in use is less or equal to 900px.

That is it.

Hurraaaay...we're done in making the YouTube clone.

Be expecting another tutorial soon.