Stretch, resize and fill the screen on masonry blog

#1

Hi,

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.

    body.blog 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:
https://egegoksu.com/portfolio/
https://egegoksu.com/icses/

Thank you.
Gokec

#2

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;
      }  
    }

Regards,
Kharis

#3

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:

#4

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

Regards,
Kharis