Grid Not Showing Up Out Cornerstone Editing

[marketimpress]

When I’m editing a page in Cornerstone the grid shows up perfectly and allows me to edit and add pictures. I’ve saved it and opened an “incognito” browser to test the end user experience and the grid of images does not show at all.

Can you advise why this is happening and a resolution?

[Jonson]

You put the images as backgrounds on the cell. Instead, inside each cell, place an image element, and then set the picture.

ps: for future, please include url to specific page as that helps diagnose quicker. I found this by googling “coast construction fire and smoke damage” (https://useccm.com/fire-smoke-damage/)

pps: to make all images look the same:

1. set height and width of the image element, to be 100%
2. set object fit to cover in the image element
3. For each cell add a class img-16-9 (no dot)
4. Then in custom css, add the following (including the dot):
   .img-16-9 { aspect-ratio: 16/9; }

now all cells will be in 16x9 format, and images will cover the entire area fully

[marketimpress]

Really appreciate your detailed response. It worked perfectly, all is looking uniform and now showing.

Thank you!

[Jonson]

no problem!! Glad it works!

[Jonson]

With cameras, sometimes the pictures aren’t exactly 16/9, so mess around with the aspect-ratios, and see what looks best. A few alternatives that will probably work with most “camera” images:
.img-5-4 { aspect-ratio: 5/4; }
.img-3-2 { aspect-ratio: 3/2; }

[marc_a]

Hey @Jonson,

Thanks for sharing your ideas, we really appreciate it.

@marketimpress, we’re glad that it is now working properly on your end.

Cheers!