0

I had been trying to hide an element with CSS, without success I have this code:

  @media only screen and (max-width: 1180px)
  .element {display:none!important;}
  }

I'm trying to instead of being 1180px it will be width 60%

  @media only screen and (max-width: 60%)
  .element {display:none!important;}
  }

i had being trying to make it work, but i had being a few days and i just give up and decide to loop for help on the community, i know I'm missing something...

Quinque
  • 3
  • 1
  • The title should be How to hide an element with css by width percentage? can't be change? – Quinque May 04 '17 at 19:08
  • [Check it Out](https://teamtreehouse.com/community/percentage-value-does-not-work-for-media-query-maxminwidth) – Nimish May 04 '17 at 19:13
  • As requested, I'm adding more information: i have an element that triggers a menu, when the screen is reduce horizontaly, the mobile menu comes, and the element is not needed any more. i calculate that the mobile menu appears at 40% reduce or less than 60% size. It needs to be percentage because obviously can't be a fixed px (different screen sizes) so probably is not screen size but windows size. – Quinque May 04 '17 at 19:17

1 Answers1

0

Do you require the only in your Media Query? See What is the difference between "screen" and "only screen" in media queries?

@media screen and (max-width: 1180px)
    .element {
        display: none !important;
    }
}

If your issue persists, please can you provide more information about your problem as there is not enough to work from in this snippet.

Community
  • 1
  • 1
christoflee
  • 148
  • 9
  • i added more information on the comments below the question. – Quinque May 04 '17 at 19:18
  • You're saying if an element is less than 60% of the window, then hide it? This cannot be done in CSS but you could calculate it in JS. **BUT** if you are triggering a mobile menu, can you use that to hide the element? Can you create a code snippet (jsbin, codepen) of what you have so far? – christoflee May 04 '17 at 19:28
  • ... let me create and try that, very insightful! thanks – Quinque May 04 '17 at 20:22
  • As you recommended, i achieved it with the triggering of the mobile menu... i'm new here so i don't know is marking your first answer is ok for the standars... but thanks any way! – Quinque May 04 '17 at 22:00