Foundation different style for small - medium - large

Question

I would like to give different CSS to H2 when his parent is large - medium - small.

Here my HTML:

            <div class="category-box large-6 medium-6 small-12 columns">
                <h2 class="category-name">My title</h2>
                <div class="hide-for-small">Everything you need to know about using the framework.</div>
            </div>

I tryed this kind of selection:

.category-box.large-6 h2{}
.category-box.medium-6 h2{}
.category-box.small-12 h2{}

But is not working as i want.

Answer 1

You should use media-queries to achieve this. Take a look at the foundation media-queries docs to get the correct settings to use. (Or you could just find them inside the css)

@media only screen and (max-width: 40em) { /* small */
.category-box h2{/*small h2 style here}
}
@media only screen and (min-width: 40.063em) { /* medium */
.category-box h2{}
}
@media only screen and (min-width: 64.063em) { /* large */
.category-box h2{}
}