how can i resize the secondary images on a product?

how can i resize the secondary images on a product?

themoonlitholo
Tourist
4 0 3

hello my friends, im just wondering how to resize the other images i include on a product so they arent so small, is there a way to resize them? ive attached a photo showing the images im talking about! any info or help would be appreciated!  larger.PNG

 

https://themoonlitholo.com/

 

pass: Pleasehelp

Replies 5 (5)

BiDeal-Discount
Shopify Partner
789 103 176

Hi @themoonlitholo 

you can make it bigger by this Custom CSS:

@media screen and (min-width: 576px) {
    .product-gallery--media-thumbnail img {
        height: 150px;
    }
}

result will be:

BiDealDiscount_0-1747182840278.png

 

- Helpful? Like & Accept solution! Coffee tips fuel my dedication.
- BiDeal Bundle Volume Discounts: Upsell with discount bundles, quantity breaks, volume discounts & mix-and-match bundles. AOV+ with free gifts, free shipping & progressive cart
- Contact me via WhatsApp

Samita-Danny
Shopify Partner
17 0 1

Hi, @themoonlitholo 
i'm Danny from Samita

Follow these Steps:

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

4) Fil and change 

@media screen and (min-width: 576px) {
  .product-gallery--media-thumbnail img {
    height: 120px;
  }
}

 

Sami B2B Wholesale — Unlock powerful wholesale features
Sami Request a Quote — Let customers request quotes easily

If our reply helped, please give it a Like or mark it as a Solution!

Kyle_liu
Shopify Partner
437 55 80

Hi @themoonlitholo 

 

In theme.css file

height: 120px;  120 can be adjusted to your desired value, and the larger the value, the larger the image

 

@media screen and (min-width: 576px) {
  .product-gallery--media-thumbnail img {
    height: 120px;
  }
}

 

 

If this is helpful, please Like and Accept the solution.
Want to modify or custom changes on store? Let me help.
- Feel free to contact me Email Me Buy Me A Coffee

Bundler-Manuel
Astronaut
1115 51 131

Hello there @themoonlitholo  You should try the following steps

Open Online Store > Theme > Edit Code

2. Find and open the theme.css (or base.css, custom.css) file

3. Paste the code snippet below at the bottom of the file and hit save

 

.imgWrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    /* You can change this value to fit your preference */
    height: 550px;
    overflow: hidden;
    background: black;
}

.imgWrapper img {
  width: auto; 
  height: 100%; 
  object-fit: cover;
}

 

Let me know if this works for you!

Emmanuel
Please let me know if it works by marking it as a solution!
Bundler - Product Bundles app, a great bundle app for Shopify, with glowing user testimonials and a free plan.

Sparklingtools
Shopify Partner
15 0 2

Hi! 

It seems that you have already resolved it! Am I right?

 

Blackpent_0-1747198626126.png

 

If helpful then please Like and Accept Solution! 🙂
Enjoy this app: Pasaro