One perennial issue florists face is how to make their product images appear consistent when in a grid format. Images are often uploaded in multiple different size formats, so the products appear messy on the page.
The best solution would be to ensure that all product images are the same dimensions whether all square or all portrait etc.
However, this is not always practical, so we want to force all products to "appear" square when displayed in the grid.
We do this with the use of the "cover" css element.
The first example is done specifically for desktop screen resolution, assuming that the mobile view is one per row.
The second is added to for mobile.
Added: 2025-4-04 and last modified: 2025-4-04