mizech mizech - 2 months ago 9x
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>

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?


Try this

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