Masonry layout in 4 across instead of 3

Site moved to elnews.unm.edu

Hi Sharon, nice site!

Give this CSS a try:

.masonry .masonry-post, 
.masonry .grid-sizer {
    width: 25%;
}

Adding CSS: https://generatepress.com/knowledgebase/adding-css/

Hi Tom,
i tried that code but it works fine only if you set the size of the main post to large. If it's set to medium it doesn't fit perfectly the layout. See here: http://www.80s.it

Any advice?

Thank you,
Daniele

You'll want to add this as well:

.masonry .grid-sizer.width4, 
.masonry .masonry-post.width4 {
    width: 75%;
}

Nice site! :)

Hi!
It works great in the homepage!

Indeed, i set 5 columns

.masonry .masonry-post,
.masonry .grid-sizer {
width: 20%;
}

.masonry .grid-sizer.width4,
.masonry .masonry-post.width4 {
width: 60%;
}

and it worked fine too.

But eventually I stayed with 4 columns.

The only matter is on archive/search page, which show a short picture for the main post.

Like this: http://www.80s.it/category/cinema/

I'm playing with the css file, giving max-width and width to .img, but it's not working...

Can you help?

Have you tried changing the post image alignment to center in "Customize > Blog > Post Images"?

No I haven't. But it remains short from both sides.

If I give to img:

img {
height:auto;
width: 100%;
}

the image in the blog will fit the space but inside the post will be huge and always above the content (and not inside).

Keeping

img {
height:auto;
max-width: 100%;
}

I will have the opposite.

How can i set width:100% for the blog and max-width:100% for the post?

Try this:

.post-image img {
    width: 100%;
    height: auto;
}

YEAH!

:D

Awesome :)