Jump to content

Grid: Masonry - Center all content in gallery

Recommended Posts

Site URL: https://roadrunner-caterpillar-27et.squarespace.com/gallery

I wanted to reduce the width of the overal size of the Grid: Masonry gallery.

I added this CSS and the content all reduced in size nicely.

.gallery {
    width: 85% !important;
    height: auto !important;
    left: 0 !important;
    top: 0 !important;
}

However, the content is aligned top left and I would like it centered. This would seem pretty easy but I can not find examples of code to do this.

Screen Shot 2021-10-30 at 11.43.59 PM.png

Link to comment
  • Replies 4
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

2 hours ago, tommyello said:

Site URL: https://roadrunner-caterpillar-27et.squarespace.com/gallery

I wanted to reduce the width of the overal size of the Grid: Masonry gallery.

I added this CSS and the content all reduced in size nicely.

.gallery {
    width: 85% !important;
    height: auto !important;
    left: 0 !important;
    top: 0 !important;
}

However, the content is aligned top left and I would like it centered. This would seem pretty easy but I can not find examples of code to do this.

Screen Shot 2021-10-30 at 11.43.59 PM.png

Your site is sill private now. Kindly share it with the protected password for us to check your issue together

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
2 hours ago, tommyello said:

123anypass

try 

.gallery {
    margin: 0 auto;
    width: 85% !important;
    height: auto !important;
    left: 0 !important;
    top: 0 !important;
}

 

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • 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.