CODEWITHSUNDEEP
htmlcss
Jay
Jay

Reputation: 51

How can I remove an element of my website using media queries

I want to be able to remove this:

<div id="mail1">
  <li>
    <i class="glyphicon glyphicon-envelope" aria-hidden="true"></i>
    <a href="mailto:[email protected]">[email protected]</a>
  </li>
</div>

When a device is smaller than 600px.

Upvotes: 1

Views: 1906

Answers (3)

Brandon McConnell
Brandon McConnell

Reputation: 6119

I see most answers on here using max-width: 600px but if you truly want to hide it under 600px, you should use 599px like this:

Desktop-First CSS

@media only screen and (max-width: 599px) {
  #mail1 {
    display: none;
  }
}

If you want to use mobile-first CSS, you can code it like this instead:

Mobile-First CSS

#mail1 {
  display: none;
}
@media only screen and (min-width: 600px) {
  #mail1 {
    display: block;
  }
}

Upvotes: 0

Mohammad Abdul Alim
Mohammad Abdul Alim

Reputation: 488

I would suggest using a class instead of assigning the property to an id. This will help you use this class to multiple components which you want to hide on a screen having width less than 600px.

@media only screen and (max-width: 600px) {
  .desktop-only {
    display: none;
  }
}
<div id="mail1" class="desktop-only"><li><i class="glyphicon glyphicon-envelope" aria-hidden="true"></i><a href="mailto:[email protected]">[email protected]</a></li></div>

Upvotes: 3

Yash Maheshwari
Yash Maheshwari

Reputation: 2412

Use media query and then use display none.

@media only screen and (max-width: 600px) {
  #mail1 {
    display: none;
  }
}

Upvotes: 0

Related Questions