Masonry grid same view

[Dmitry]

Hi!

Is it possible to make the background color (white) to cover the whole inside-article div regardless of the grid settings (number of columns + featured post)?

[Leo]

Hi there,

Not sure if I understand.

Are you referring to this element being outside the container here?
https://www.screencast.com/t/i0FlqstGf8iv

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Dmitry]

Yes! When masonry is not active, its inside.

[Leo]

How is that content added?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Dmitry]

It’s data from ACF and added using a hook element to display “after_entry_title” for post category archive.

[Leo]

Looks like the masonry calculated the height before the hook content is loaded.

Not sure if there is way around that unfortunately.

What if you use the custom excerpt metabox to input the Size and Prize instead?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Dmitry]

In this case you need to put a piece of HTML+CSS into every exert of every post. Not sure it will be comfortable…

[Dmitry]

Its strange, because layout itself works OK with this data. The problem is only about the background color.

[Dmitry]

Well, it looks like I need to use not the best solution just to add some css like .masonry .inside-article {padding-bottom: 120px !important;}

Can you also help a little with featured post thumbnail image. When masonry is set to 3 columns, there are white paddings on the image. Cant find out where do they come from.

ps check the same link

[Leo]

In this case you need to put a piece of HTML+CSS into every exert of every post. Not sure it will be comfortable…

You should only need to add 2 lines of HTML everytime. The CSS will be the same so only needs to add it once globally.

Its strange, because layout itself works OK with this data. The problem is only about the background color.

The background color isn’t working as the layout isn’t accounting for the extra content.

As for the padding, the image container looks normal:
https://www.screencast.com/t/2AZoc7FW

It’s the image itself is a bit small. Does uploading a bigger image help or no?

If no can you disable the hover effect so I can take a closer look?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Dmitry]

Thats what I’m talking about https://www.screencast.com/t/8g4m53zm8p

The image is not small itself. Its version which is used for the archive page is small.

Well, maybe there is some kind of a snippet I can use to insert the full version of the image for the featured post on archive page?

[Leo]

Try this:

.featured-column .post-image img {
    width: 100%;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Dmitry]

Thanks, Leo! Thats nice solution

[Leo]

No problem 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts