Can't create white space between posts on responsive theme

[thomaserobinson]

Hello everyone, thanks for reading this post

I’ve created a child theme on twenty fifteen, last year’s default wordpress theme. On a desktop screen size, everything displays more or less how I want it to. Check it out:

http://www.thomaserobinson.com

But when I size down to a SMALLER screen size, like for mobiles, the spacing between the posts gets really messy! Some posts stick together with no space between them, it looks awful.

If I describe what I’m tearing my hair out trying to achieve, please can someone help me or give me some pointers?

Desktop size:
All content displays in ‘cards’, with vertical space between the posts and lots of space between the posts and the left and right sides of the screen.

All mobile sizes:
Small amounts of space vertically between the posts, and small amounts of space between the posts and the left and right sides of the screen.

Thanks SO MUCH for any advice anyone can give. I have tried a few different things already but none of them have worked!

[Senff]

First of all, I noticed that the titles are yay off on some screen sizes. I doubt you really wanted to give them a left/right padding of 90%???

.entry-header {
    padding: 0 90.0909%;
}

As for the space between articles: there IS space for screens larger than 38.75em because of this:

.hentry + .hentry, .page-header + .hentry, .page-header + .page-content {
    margin-top: 7.6923%;
}

But below that, the articles don’t have a top margin, which is why there’s no space in between.

[thomaserobinson]

Thank you Senff, I’m so jealous — you immediately saw what I was racking my brains trying to work out.

I was unaware of the logic behind the ordering of media queries. Thanks to you I have put some time into researching this and now understand why, from my perspective, they appeared to be in the wrong order!

And good shout on the 90% padding — they are supposed to be about 9.0% — I must have inserted a decimal in the wrong place!

I’m really grateful to you for your help and like I say it’s helped me to learn even more.

Cheers man,
Tom

[Author]

Posts