Space between div that works on mobile too

Question

Assuming that i have something like:

<div class="features small">
    <div class="content-inner">
        <h1>Lorem Ipsum</h1>
        <div class="feature-items">
            <div class="feature">
                <img style="" src="icon1.png" />
                <div class="title">
                    <h4>Title 1</h4>
                </div>
            </div>
            <div class="feature">
                <img style="" src="icon2.png" />
                <div class="title">
                    <h4>Title 2</h4>
                </div>
            </div>
            <div class="feature">
                <img style="" src="icon3.png" />
                <div class="title">
                    <h4>Title 3</h4>
                </div>
            </div>
            <div class="feature">
                <img style="" src="icon4.png" />
                <div class="title">
                    <h4>Title 4</h4>
                </div>
            </div>
        </div>
    </div>
</div>

How can i set some space between every single "feature" div that works on mobile too? Now'm i'm trying this in CSS:

.feature { padding-right: 4rem; }

But for mobile i have to use media queries. And if i don't want to use media?

Answer 1

I'd suggest only applying the padding at desktop breakpoints, and not setting styles at for desktop and then overriding for mobile. This is an anti-pattern within the cascade.

So I'd just do:

@media screen (min-width: 64em) {
    .feature { padding-right: 4rem; } 
}

There isn't a way I know of without using media queries at all unless you are changing styles with js - which seems like overkill for what you are trying to do. I wrote a little bit about mobile-first css patterns in this short post:

http://mrmrs.io/writing/2014/08/18/mobile-first-css/