mizech mizech - 4 months ago 13
CSS Question

Foundation's grid system: Hiding an element when screen becomes smaller doesn't work

I've got a three-columns layout. The idea is that the most right column shall vanish on small screens.



.rect {
background-color: lime;
margin-bottom: 10px;
padding: 10px 0;
}

<link href="https://cdn.jsdelivr.net/foundation/6.2.0/foundation.min.css" rel="stylesheet"/>

<div class="row text-center">
<div class="large-4 column rect">FIRST</div>
<div class="large-4 column rect">SECOND</div>
<div class="large-4 column rect show-for-medium-up">THIRD</div>
</div>





I think I've used correct class-names. Rest of coding should be alright too.

But it doesn't and I've no good idea why.

Does anyone know what I'm doing wrong here?

Answer

Try this

<div class=" large-4 column rect hide-for-small-only ">THIRD</div>