How to Detect Mobile Screen with CSS

On this tutorial, we are going to detect mobile screen using CSS.

To create a fluid layout for a site and you might want to hide the contents of a div or the entire div itself, on mobile view but surely not desktop nor tablet, you have to set the display to 'none' for the mobile layout, You will need two things. 

The primary is @media display to spark off the specific code at a certain screen size, used for responsive design. 

The second one is using the visibility: hidden; attribute. as soon as the browser/screen reaches 600 pixels then #div_container becomes hidden.

@media screen and (max-width: 600px) {
  #div_container {
    visibility: hidden;
    display: none;
  }
}

On the off chance that you are utilizing another CSS for Mobile View, simply  just include the visibility: hidden; to #div_container. 

What expectation this causes you?

• Tweet
• Share
• Share
• Share