KoldTurkee KoldTurkee - 6 months ago 21
CSS Question

hide div tag on mobile view only?

I'm creating a fluid layout for a site. I'm trying to hide the contents of a

<div>
or the whole
<div>
itself in the mobile view, but not the tablet and desktop view.

Here's what I've got so far...

#title_message {
clear: both;
float: left;
margin: 10px auto 5px 20px;
width: 28%;
display: none;
}


I have the display set to 'none' for the mobile layout and set as block on the tablet/desktop layouts... Is there an easier way to do that, or is that it?

Answer

You will need two things. The first is @media screen to activate the specific code at a certain screen size, used for responsive design. The second is the use of the visibility: hidden attribute. Once the browser/screen reaches 600pixels then #title_message will become hidden.

@media screen and (max-width: 600px) {
  #title_message {
    visibility: hidden;
    clear: both;
    float: left;
    margin: 10px auto 5px 20px;
    width: 28%;
    display: none;
  }
}

EDIT: if you are using another CSS for mobile the just add the visibility: hidden; to #title_message. Hope this helps you!

Comments