[Resolved] Create and/or Adjust spacing for Product Images

[arthur]

Hi it looks like someone switched to the flex box models for product images in woocommerce. Personally I hate that model, because it is very confusing, but I digress. That is not the point of this 🙂

I want to create spacing between the main image and the thumbs. I want to create spacing between the thumbnails. And I would most prefer to introduce a border, but I can live without it.

I have GP premium and thought it would be part of the ‘spacing’ plugin, but no such luck….

I’m happy to load in CSS to accomplish this – but I have no idea what to write. I tried a few things, but again, that flex-box model……

Thanks!

[Leo]

Hi there,

Any chance you can link me to the site in question?

You can edit the original topic and use the private URL field.

Let me know 🙂

[arthur]

I need to also give you the login url and a username and password so you can see the issue….how do I send a private note or private reply?

[Leo]

You can use Account Issue here: https://generatepress.com/contact/

Make sure to reference topic URL.

Thanks!

[arthur]

done thanks

[Tom]

Hi there,

Try this:

.woocommerce div.product div.images .flex-control-thumbs {
    margin-top: 10px;
}

.woocommerce div.product div.images .flex-control-thumbs li {
    border: 10px solid #fff;
    box-sizing: border-box;
}

Let me know if this helps or not 🙂

[arthur]

Looks really good!!

I didn’t like that the thumbs then did not extend to the same side-to-side edge as the main photo.

So I tweaked the code and added negative margins to the container.

QUESTION: I don’t understand the flex-box model enough to understand if this will have further repercussions. Do you think this is a good solution or is there a better, less dangerous one?

Updated code is here:

.woocommerce div.product div.images .flex-control-thumbs {
    margin-top: 10px;
    margin-left: -10px;
    margin-right: -10px;
}
.woocommerce div.product div.images .flex-control-thumbs li {
    border: 10px solid #fff;
    box-sizing: border-box;
}

[Tom]

That looks good to me – you shouldn’t have any issues 🙂

[arthur]

Thanks!

[arthur]

PS do you now use the flex-box model for all of generate press? Did you add that in or did WooCommerce start adding that in?

[Tom]

Haha, whoops – yes, I meant shouldn’t.

We added flexbox for our mobile header, but that’s it.

We’ll likely move to a CSS Grid solution for WooCommerce soon.

[arthur]

We’ll likely move to a CSS Grid solution for WooCommerce soon.

Does that mean that you’ll move the flex-box woocommerce code out of flex-box and into a normal CSS Grid?

[Tom]

If necessary. If the way they have it now works with the way we approach things, we’ll likely leave it.

[arthur]

okay cool thx!

[Tom]

You’re welcome 🙂

[Author]

Posts