Jump to content

Gallery Grid: Simple - prevent recropping, adding white instead to confirm to grid size

Go to solution Solved by tuanphan,

Recommended Posts

Site URL: https://www.adamamin.com.au/home/cost-house-clovelly

I'm building a project page for my photography website. 

Using the grid: simple layout to show all the images, I find that it crops the images to conform to the aspect ratio.

Is there an ability to add a white background instead so that the images can keep their aspect ratio?

This is best explained in the website example below:

https://derekswalwellprints.com/collections/outdistance

Scroll to the bottom to find:

image.thumb.png.2c007ba17606d9bdfde4a1edec9e9991.png

Link to comment
  • 2 weeks later...
On 7/6/2022 at 10:44 AM, aamindosnaps said:

Wow this worked wonderfully! Thanks tuanphan!

 

Any code to add a similar stroke to the grid? To help seperate each cell the image lives in.

 

Thanks a million!

Edit Page > Add a Code Block (anywhere) > Paste this code

<style>
  figure.gallery-grid-item {
    border: 1px solid grey;
    padding: 10px;
}
</style>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 weeks later...
  • 1 year later...

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.