Align product image thumbnails to left of main image - Debut Theme (desktop only)

[PompK]

Hoping someone can help me move product image thumbnails to the left of the main image in the Debut theme.

Ideally looking to implement this in desktop only as the mobile default works fine.

I've seen a few unanswered forum posts on this topic so any help would be amazing!

Thanks.

[oscprofessional]

Hi,
Please share your store URL, So I will give you proper solution here !

[PompK]

Thanks for the reply, myshopify store URL below

pompeak-watches.myshopify.com

[oscprofessional]

Hi,

I have checked your requirement, there is a fixed max-width 1200px for layout, if we put horizontal thumbnail than your main product image size will reduce, it will not look good, 

This is time consuming task, you have to do code customization or you have to change whole product page layout plus all pages layout.

[PompK]

Ah yes I understand it will make the main image smaller - I have resized images specifically for this.

Is it a simple code paste to just move the thumbnails to the left side? (ignoring any side effects)

If possible I would like to try it, and can always revert back to default if it ruins the page?

Again, many thanks for the replies!

[Ash526]

This worked for me adding to the bottom of the theme.css (under assets):

@media only screen and (min-width: 750px) {
.product-single__media-wrapper {
    width: 80%;
    float: right;
}
.thumbnails-wrapper.thumbnails-slider--active {
    float: left;
    width: 15%;
}
.product-single__thumbnails-item {
    flex: 0 0 51% !important;
}
}

You can adjust the thumbnail size by changing the bottom percentage (flex). 50% seemed to mess up the alignment so I used 51%.

[KevinFeldman]

Hey, do you know how to move the pictures more to the left? It worked like a charm but theirs just a little to much room on the left side of the screen?