[Resolved] Customizing the blog masonry grid with CSS

[André]

Tom, would love your help to apply custom CSS to modify how our blog masonry grid is displayed.

Two things we’re trying to do:

1 (primary):

We have our Container Width at the narrowest setting (700px). We also have your body font set pretty large.

As such, our blog displayed as a masonry grid seems quite “cramped”.

Here is our blog:

https://tinylittlebusinesses.com/blog/

Would love to have the body font for the non-featured blog posts in the masonry grid, be set smaller.

So if the body font is 20px (1em), then the masonry grid would be 70% of that (0.7em).

I’ve used Inspector, but can’t seem to nail down the custom CSS to make this happen.

2 (secondary):

We have a body background-color set as while in the customizer.

But for our blog posts in the masonry grid, would like to have the grids as a gray background (#ededed), so that the blog posts “pop” out.

Much like this site I found in one of the forum comments:
http://nhssf.scipdev.org/blog/

Only difference is that their background-color is gray, with the blog masonry grid as while.

I want the opposite effect. The inverse.

Again, I’m a bit stumped how to do this with customer CSS.

Thanks Tom!

André

[Tom]

Hi there,

1. Try this:

.masonry-post:not(.featured-column) {
    font-size: 12px;
}

2. Give this a shot:

.masonry-post .inside-article {
    background-color: #ededed;
}

[André]

Damn, you made that look easy, Tom. Thx dude.

André

[Tom]

You’re welcome!

[André]

Tom, sorry to be a pain – I have a followup issue that I’ve tried to resolve on my own, but can’t.

Our site has a global branding header above the primary navigation, which shows on nearly every page and post. This is how we want it.

For our blog we want to use featured images because they display nicely (no padding around images) in the masonry grid.

However, the problem is that the blog posts featured images don’t display on the single page posts. And I guess this is because of our global header (which we want displayed, too).

Is there a way to display the featured image on the single blog page in our current setup?

Example (no featured image is displayed; although it is set to show):
https://tinylittlebusinesses.com/how-to-read-a-business-book/

The workaround I’ve tried is to just manually display the image at the top of the page (not via the featured image box)…

However, this then “breaks” how images are displayed on the masonry grid, because we get a double images showing:

Example 1:
https://www.dropbox.com/s/w9s98czane4k8ya/Screenshot%202017-12-07%2010.39.41.png?dl=0

Example 2:
https://www.dropbox.com/s/iptb70vm90rveh6/Screenshot%202017-12-07%2010.39.30.png?dl=0

Perhaps I’m missing something obvious.

André

[André]

UPDATE: I figured out a workaround that works. I still can’t (or don’t know if even possible) to display the featured image on the single post page – and would still like to know – but at least the workaround works. Yay.

[Leo]

Hi Andre,

My recommendation would be to create the current global header using the actual header instead of page header.

You should be able to re-create the current header by uploading the top image (brands) to top bar widget area:
https://docs.generatepress.com/article/top-bar-widget-area/

Then the second image (logo) through site identity: https://docs.generatepress.com/article/site-identity-overview/

Then that header will show on every page so you still have the flexibility to use featured images or page headers.

[André]

Thx Leo, I’ll test that out. Appreciate it.

[Author]

Posts