Hi I created my first React Project and I want to hide this 'side-menu' section in mobile screens. Is there a way to do this using css?

<div className='side-menu'>
  <SiderComponent />
</div>

CodePudding user response：

If you want to hide this div in all the devices that have a max-width of 768px, just use this,

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

at the same time if you want to hide a div on large screens (width is larger than 768px), use the below one

@media (min-width: 768px){
  .your-class {
    display: none;
  }
}

CodePudding user response：

You can use media queries like that :

@media screen and (max-width: ...px){
   .side_menu{
       display: none;
   }
}

https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries