Menu icon Foundation
show-for / hide-for

Seems i dont see the forest while watching so many trees:

 

I have two divs like:

 

<div class="show-for-medium"></div>

and

<div class="hide-for-medium"></div>

 

medium is 600px.

 

Everything is fine till 599 and from 601, but with 600px i can see both divs.

 

I tried it with another "display:none" in a media query like

@media only all and (min-width:600px) {

but funny, funny i have the same problem. Seems that min-width:600 means more than 600 and not more or equal 600px.

I am confused and i hope someone can help, please.

 

 

 

 

shoHide

Seems i dont see the forest while watching so many trees:

 

I have two divs like:

 

<div class="show-for-medium"></div>

and

<div class="hide-for-medium"></div>

 

medium is 600px.

 

Everything is fine till 599 and from 601, but with 600px i can see both divs.

 

I tried it with another "display:none" in a media query like

@media only all and (min-width:600px) {

but funny, funny i have the same problem. Seems that min-width:600 means more than 600 and not more or equal 600px.

I am confused and i hope someone can help, please.

 

 

 

 

Todd Richards over 3 years ago

What happens if you use

<div class="show-for-medium"></div>

and

<div class="show-for-small-only"></div>

Robert over 3 years ago

I have not tried it, but it could solve only 1 to n, it will fail with show-for-large, because show-for-small-only and show-for-medium-only should not be possible. I am confused that nobody else knows about this problem. Is there nobody else using two menus? Or is there another better way to do so?

Todd Richards over 3 years ago

My thought was that the "show-for-medium" (not medium-only) would satisfy medium and higher, while the "show-for-small-only" would handle only small.

Robert over 3 years ago

Yes. But not for that one pixel that separetes small and medium in my example.

I have set

small 0,
medium 533

 

show-for-medium x / hide-for-medium y

i have x for 0 till 532

i have x y for 533

i have y from 534 till n