Show/Hide a div according to screen size HTML/CSS

Issue

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>

Solution

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;
  }
}

Answered By - Kavindu Madushanka