Product gallery alignment

[nikolaus_k]

Hey,
my product gallery images align a bit randomly once the jump in a second row.
Is there an easy CSS to align them one below the other once it´s 2 rows. I also would like to have a bigger gap between the rows.

Weinabo verschenken - Einmal beschenkt, mehrmals überrascht

any idea?

Thx in advance, Nik

[jade]

Hey Nik,

Please try this code in X > Theme Options > CSS:

.flex-control-nav.flex-control-thumbs {
    padding-left: 0;
    padding-right: 0;
}

@media (max-width: 768px) {
    .flex-control-nav.flex-control-thumbs {
        text-align: left;
    }

    .flex-control-nav.flex-control-thumbs li {
        margin: 0 0.5em 0.5em 0 !important;
    }
}

Hope this helps.

[nikolaus_k]

@jade

.flex-control-nav.flex-control-thumbs { padding-left: 0; padding-right: 0; } @media (max-width: 768px) { .flex-control-nav.flex-control-thumbs { text-align: left; } .flex-control-nav.flex-control-thumbs li { margin: 0 0.5em 0.5em 0 !important; } }

worked perfectly, thank you!

no I just need to align them in the center below the picture. Can help me out with this as well please?

I just need to bring the “zoom area” somehow to same size. Because right now the gallery is center aligned to the zoom area

[friech]

Hi Nikolaus,

It’s already centered on my end, please clarify how we can see the issue.

• 

Thanks,

[nikolaus_k]

but not on large screens…

[ruenel]

Hello Nikolaus,

Your image dimension is only 600x600 which is why on larger screens, the thumbs are no longer centered. I would recommend that you do the following:

• Go to Appearance > Customize > WooCommerce > Product Images and change the Main Image Width to 800

• And then go to the plugins section. Install “Regenerate Thumbnails” plugin.

• You will need to regenerate the thumbnails so that the product images will be regenerated into 800x800

• After doing the updates, always remember to clear all caches since you have installed WP Fastest Cache plugin so that the code from the latest release is always in use. This will help you to avoid any potential errors.

And please clear your browser cache too. You may use private browsing mode in testing your site to make sure that you are viewing the latest codes from the updates and not the cached version in your browser.

We would love to know if this has worked for you. Thank you.