Reduce thumbnail size on desktop on product page (Taste theme)

[medicus-serpens]

Hi there,
I am busy building our webshop and I know my way around code a bit, even if Shopify's liquid structure is new to me. I am getting the hang of the liquid coding, but I can't seem to solve the thumbnail issue, so far.
I am trying to reduce the thumbnail size on the product page by about 50%, because some products have quite a number of variants and the page therefore becomes crowded quick.
Website is still not fully published, so password = medicus.
URL to specific product page: https://medicusserpens.de/products/dienstgrad-schlaufe-sanoa-diverse 
Website language is German, so don't be afraid. 😉
You're looking for the "SanOA - diverse" product.

Screenshot shows the thumbnails I would like to shrink by about 50%. It might look even more crowded, when you're viewing this because I am still busy adding variant pics.
I would like to change this setting globally (all products), but only on Desktop view (certain screen size as limitation?), because on mobile there are no screenshots anyways.

Any help is much appreciated!

 

[Moeed]

Hey @medicus-serpens 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
@media screen and (min-width: 768px) {
.thumbnail-list {
     grid-template-columns: repeat(7, 1fr) !important;
}
}
</style>

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[medicus-serpens]

Thanks a bunch! This would have also worked, but I wanted to incorporate it into the base.css file.
in any case: thanks for the super fast help, reply and working solution.

[Moeed]

Thank you for your reply. I'm glad to hear that the solution worked well for you. If you require any more help, please don't hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.

[Made4uo-Ribe · Accepted solution]

Hi @medicus-serpens 

Try this one. 

1. From your Shopify admin dashboard, click on "Online Store" and then "Themes".
2. Find the theme that you want to edit and click on "Actions" and then "Edit code".
3. In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

@media screen and (min-width: 990px) {
    .thumbnail-list {
        grid-template-columns: repeat(6, 1fr) !important;
    }
}

• And Save. 
• Result:
  

  Note: This is apply only on the desktop, tablet and mobile is not included. 

 Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better! 

[medicus-serpens]

Thanks a bunch! This worked a treat and it looks much neater now. Could you explain the specific css a bit more?
What determines the size of the individual thumbnail boxes? 6 determines to number of tiles per row, I guess, but what determines the size?
Cheers!