Stretch, resize and fill the screen on masonry blog


I’m using Sydney on a website of mine. I’m using an archive page, set to Masonry type blog, to show my portfolio and blog posts on two different categories. However the posts/images are not resizing and filling the grid correctly to stretch on both sides of the screen. On wider screens, it seems that I can even fit around 6 columns, however it is fixed to 3, I guess.

The following doesn’t work either, it successfully increases the column count but messes with the alignments. div#content, body.archive div#content {
       column-count: 4;

Is there a work around for that? Can you help?

Here is the link to my blog pages:

Thank you.

Hellok Gokec,

If I got what you described correctly, you would add this CSS code to Appearance > Customize > Additional CSS from dashboard.

    @media only screen and (min-width: 1025px) {
      .masonry-layout .hentry {
        width: 16.6666666667% !important;


Hi Kharis,

Your solution gave me more insight and fixed it by making the container of the archive width: 100%. I’ve also used your code to increase the size of columns.

Thank you :slight_smile:

Great! Glad to know you got my code suggestion useful to you.