Change amount of columns of gallery grid according to screen size

Hi all,

I have a gallery section on my website in a masonry grid. In squarespace I set the amount of columns to 3. Per default the mobile version makes it into two columns, which is fine. However when checking the website on really large screens a three column grid seems too big, losing the overview of the gallery. I was therefor wondering if it's possible to tweak the website/write some code so that on large screens (let's say a resolution of more then 1920px), there will be 4 instead of the usual three columns. 

Thanks in advance! Blow a screenshot if the website as it is now. 

Thanks in advance!

Matthias

Hi, Would it be possible to share your site URL? No way to fix the issue without looking into the site. Thanks!

Hi @Lesum, thanks for the reaction. 

I have put the page online now, here is the url: https://www.fallow.eu/architecture

Best regards,

Matthias 

@Matthias39682 Hi, Here's a code snippet to display 4 columns in your gallery section when the screen resolution is more than 1920px:

@media screen and (min-width:1921px) {
	figure.gallery-masonry-item img {
    	width: 100% !important;
	}
	.gallery-masonry-item-wrapper {
		height: auto !important;
	}
	figure.gallery-masonry-item {
		position: initial !important;
		float: left !important;
		display: block!important;
		width: 25% !important;
		transform: unset !important;
		padding-right: 3vw !important;
		padding-bottom: 3vw !important;
		box-sizing: border-box;
	}
}

Code works to display 4 columns. However, it changes the placements of the images in the gallery. 

If you want to place the images in different manner while using 4 columns, you can create a new section with the same gallery. Then with some basic CSS, we can display that galley only when screen resolution is more than 1920px.

Let me know how it goes.

Thanks!

Sam

@Lesum, thanks again for your help!

I added the code and it almost seems to work but there is something wrong with the alignment of the images. The masonry grid is a bit flawed for the first three colums (the images are pushed into a more regular grid by adding white space between, see screenshot below). Is there any way to change this?

I understand your solution with two different galleries. However I suppose it also means that when we add projects to our portfolio (gallery), we have do to the process twice? It's an option worth considering, but for now I prefer not having control about the order of projects in the 4-column grid. At least when the allignment issue can be solved. 

Thanks so much for your help!

Kind regards, Matthias