Celebrating 5 Years! Get 25% off GP Premium with the discount code: CELEBRATING5

[Support request] Grid without media queries

Home Forums Support Grid without media queries

This topic contains 1 reply, has 2 voices, and was last updated by  Tom 3 days, 7 hours ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #900372

    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;}

    #900761

    Tom Lead Developer

    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 🙂

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.