Blog Post Tiles CSS

melissaclaireleslie · Member · Oct 21, 2015 at 12:17 pm
Copy link

Add topic to favorites
My blog is currently set to a static ‘Maintenance’ style page whilst I give it a bit of a facelift, so there won’t be much to see on there at the moment, but I aim to use the Penscratch theme and customise the CSS slightly.

I just wondered if anyone out there had some good CSS for a nice ‘Tile’ layout for Blog Posts. I don’t want a continual script of my blog posts and would like to show them by their title with an image so viewers and readers have the option to click on which post they’d like to read.

Appreciate it might not be convenient that my blog is effectively ‘down’ at the moment but hoping that by stating which theme I aim to use it will be doable!

Thanks in advance.

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Oct 21, 2015 at 7:37 pm
Copy link
Hi there, this is a bit of a challenge with Penscratch, the current theme you are using. I think about the best we could do would be two columns for screens/windows wider than 600px and then let it fall back to the original design for screens narrower than that for smaller tablets and phones. You can give this a try and see what you think. The Media Query at the beginning of this does the resizing and positioning, and the last rule takes away the featured image and the content, leaving just the title and the date/author.
```
@media screen and (min-width: 600px) {
.blog .hentry {
    max-width: 45%;
    display: inline-block;
}
.blog article:nth-child(odd) {
    margin-right: 40px;
}
}
.blog .hentry .entry-content, .blog .hentry .entry-thumbnail {
    display: none;
}
```
melissaclaireleslie · Member · Oct 27, 2015 at 9:09 pm
Copy link
Hi there, thanks so much for this, I really like the layout that code has given me. I wonder if there was a way to feature an image though? Either underneath or above the post title and info that displays underneath?

Ever so grateful for your help here :)
thesacredpath · Member · Oct 28, 2015 at 6:05 am
Copy link
In the last rule above, I hid the featured images. We can bring back the featured images for posts by removing the second part of the CSS selector (first line) so that it looks like this.
```
.blog .hentry .entry-content {
    display: none;
}
```
melissaclaireleslie · Member · Oct 28, 2015 at 2:53 pm
Copy link
Thanks, I had a few teething problems when I brought the featured images back, but managed to get it to settle it seems. I accidentally changed the widths of the posts on my home page when trying to fix it but ended up liking it more the way it went, a happy accident!

Do you know if there is a way that I can incorporate the same layout from my home page onto my menu pages? Instead of having the whole post there to read? I’d much prefer if people were given sight of multiple posts quickly rather than being meant with a fully expanded post upon clicking on a menu page.
supernovia · Staff · Oct 28, 2015 at 7:40 pm
Copy link
Hi @melissaclaireleslie , while the category page is set to show full posts, you might experiment with the “more” link on these posts. It’s an option in your editor:
https://en.support.wordpress.com/splitting-content/

Hope that helps!

No items found.