Jump to content

Move Grid: Masonry up the page

Recommended Posts

Hello all,

I have a gallery grid:masonry on my homepage set to 'inset' mode because I love the columns on either side. However it's too far down the page now. I was wondering if anybody knows of some code that would move my gallery up the page please?

1512217593_Screenshot2020-06-09at12_45_06.thumb.jpg.4ff16df00601f4aa2030198349ad0d56.jpg

M

Link to comment
  • Replies 14
  • Views 1.1k
  • Created
  • Last Reply
23 hours ago, tuanphan said:

Add to Home > Design > Custom CSS


.homepage .gallery-masonry {
    padding-top: 1vw;
}

 

you did it! thank you so much. I must say for all it's slight rigidity, Squarespace is a beautifully clean website builder 

Link to comment
On 6/11/2020 at 1:02 PM, tuanphan said:

Add to Home > Design > Custom CSS


.homepage .gallery-masonry {
    padding-top: 1vw;
}

 

From your code I can deduce I basically need to know the name of the page and the video element that I want to move up. After searching through the code on 'New Page' I came up with the code

.collection .video-block {

    padding-top: 1vw;

}

Unfortunately this has no effect.. am I at least on the right track though?

Link to comment

@Falconer you can target specific pages using collection IDs or if you want to apply the padding top changes to all pages you can use this code to only apply it to the first section on a page

 

section:first-of-type .content-wrapper {
    padding-top: 0px !important;
}

 

Philadelphia, PA

👉 Squarespace Tutorials 

Chat/Message on FB Messenger for quickest responsehttps://m.me/dejaegherryan

 

Link to comment
On 6/14/2020 at 9:53 PM, RyanDejaegher said:

@Falconer you can target specific pages using collection IDs or if you want to apply the padding top changes to all pages you can use this code to only apply it to the first section on a page

 


section:first-of-type .content-wrapper {
    padding-top: 0px !important;
}

 

Hi Ryan,

Thanks a lot for this it works great on my 'about' and 'project' pages. However now the masonry grid on my homepage seems to be lower than everything else even though I've taken the previous code out that lowered just the masonry grid?

 

M

Link to comment
31 minutes ago, RyanDejaegher said:

@Falconer The homepage/gallery section has a lot of top padding (you can see in the picture below). If you want to control this you can add this code
 
 


section:first-of-type {
	padding-top: 0px !important;
}



image.thumb.png.fbc9d45ea341823a8bf7bdf5979b7c61.png

 

Result:
image.png.0913cf73c4566ac8e3b3469d6c75a679.png
 

Hi Ryan,

 

Thanks a lot for taking a look at this. I've tried using one of your codes or both together in different orders but still get the masonry grid lower than the first element on other pages. Am I being a bit dim and missing the point here?

Link to comment

To answer my own question I realise the solution is to combine tuanphan's code with yours Ryan

 

.homepage .gallery-masonry {
    padding-top: 0vw;
}

section:first-of-type .content-wrapper {
    padding-top: 90px !important;
}

 

thus the masonry gallery's padding is first taken off and then the global padding is applied

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.