Masonry layout in 4 across instead of 3

[Sharon Steely]

I used the Customizer to specify the “small” size for the masonry block width.

Is there a way to specify 4 columns instead of 3 on the home page, which has no sidebar?

This is the home page:
http://elnews-new.unm.edu

Thanks!
P.S. FYI, This WP site may be moved from elnews-new.unm.edu to elnews.unm.edu today.

[Sharon Steely]

Site moved to elnews.unm.edu

[Tom]

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/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Daniele]

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

In love with GeneratePress

[Tom]

You’ll want to add this as well:

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

Nice site! 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Daniele]

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?

In love with GeneratePress

[Tom]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Daniele]

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?

In love with GeneratePress

[Tom]

Try this:

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Daniele]

YEAH!

😀

In love with GeneratePress

[Tom]

Awesome 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts