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

Question

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>

Answer 1

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

Answer 2

You can use media queries like that:

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