[Support request] Grid without media queries

[Simon]

Hi

I’m using the Grid layout on a WooCommerce ‘Shop’ page. The challenge has been in incorporating portrait thumbnails without them automatically enlarging to the width of the others. I have successfully used position:absolute for both the first and second (hover) images, and some other changes to achieve it.

My question is about the grid, and how I can make it responsive. I cannot get away from a requirement for actual dimensions of the container for the images. The images vanish or go wrong if I don’t.

That means either (1) I accept the images themselves cannot be responsive in size to the space available, or (2) I state those dimensions within a mass of media queries in order to optimise the use of the space as the columns change. Either way, it’s not using the neat automatic responsiveness of the Grid!

Can you see a better way of doing this? – I’d value a suggestion.

Code below. (It gets a big red X from Customiser, which I hope is not my fault.)

Thank you.

Simon

#wc-column-container > .yit-wcan-container > ul.products.columns-1 {
display: grid;
grid-template-columns:
repeat(auto-fit, minmax(240px, 1fr));
grid-gap: 30px 40px;
grid-template-rows: repeat(4, 350px);}

/* Set li as ITEMS within grid */
#wc-column-container > .yit-wcan-container > ul.products.columns-1 > li.product {
align-self: end;
justify-self: start;}

/* Image container
#wc-column-container > .yit-wcan-container > ul.products.columns-1 > li.product > a > .wc-product-image {} */

/* Inner image container – matching the min item size in the grid above */
#wc-column-container > .yit-wcan-container > ul.products.columns-1 > li.product > a > .wc-product-image > .inside-wc-product-image {
width: 240px;
height: 240px;}

/* and the IMAGES */
#wc-column-container > .yit-wcan-container > ul.products.columns-1 > li.product > a > .wc-product-image > .inside-wc-product-image > img {
width: 100%;
height: 100%;
object-fit: cover;}

[Tom]

Hi there,

Any chance you can share a screenshot of the issue you’re seeing? I’ve played around with the browser width, but nothing is jumping out at me.

Let me know 🙂

[Author]

Posts