How to set maximum masonry columns?

  • Hi there!
    How do i set the maximum amount of columns for the masonry on the homepage? I’ve got basic working knowledge of both html and css, but I can’t seem to figure it out.
    Can anybody help me out? Maybe @shireling ?

Viewing 3 replies - 1 through 3 (of 3 total)

  • Hi!

    Fancy meeting you here ??

    Masonry is kind of magical for stuff like this (I figured this out as I went, and I’m pretty impressed by it).

    You supply the width of your elements, and masonry figures out how many columns it needs, all on it’s own.

    For example, if you wanted two columns on the Portfolio Page, you could add this to your CSS:

    @media screen and (min-width:1260px) {	.portfolio-wrapper .portfolio-entry {
		opacity: 0;
		width: 48%;
	}
}

    Or four columns:

    @media screen and (min-width:1260px) {	.portfolio-wrapper .portfolio-entry {
		opacity: 0;
		width: 22%;
	}
}

    You can play around with the percentages to find whatever looks best ??

    Thread Starter armaco

    (@armaco)

    Hi Chad,

    thank you for your help. This did the trick!
    I assume I can expand the “@media screen” with different sizes for the responsiveness of the site?

    Chad

    (@lynneandchad)

    Absolutely. You can also use max-width media queries to apply styles to screens over a certain size, instead of under a certain size.

    More info ??
    https://www.w3schools.com/css/css_rwd_mediaqueries.asp

    • This reply was modified 7 years, 9 months ago by Chad.
Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘How to set maximum masonry columns?’ is closed to new replies.