Dawn theme - Adjust Image slider product page height

Store Design
1

Hi,

The image slider’s height on product page is with the size of the highest image.
I want it to change according to the image - I mean, that the height will change when the image’s height will change (Just like in Brooklyn theme)

How can I do it?

Thank you!

2

@Arad0423

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community! :blush:
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

3

https://mindfulwalls.com/products/growth-comes-from-within-red-framed

I forgot to mention that I’m talking about mobile

4

Someone??

Thank you and have a great day

5

@Arad0423

did you used that code? or any issues?

6

Sorry, I’m not seeing any code here

7

@Arad0423

i mean this one

https://mindfulwalls.com/products/growth-comes-from-within-red-framed

8

It’s not code, it is my site URL..

9

@Arad0423

can you please show me issue?

10

I’m talking about the space between the image and the arrows. When it has one image with larger height - it’s make this space in all the images..

I want it to be change according to the height of the current image (Just like in Brooklyn Theme)

Thank you

11

@Arad0423

thanks for it

yes please try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/base.css ->paste below code at the bottom of the file.
@media screen and (max-width: 749px){
.product__media.media.media--transparent {
    padding-top: 100% !important;
}
}
12

Hi, it reduces the space but it’s cut the images that higher.. I want that when it it higher image, the height of the slider will rise to match the height

Thank you

13

@Arad0423

yes some images or vertical mode if possible to landscap

14

There is something in the code that I can do for it to change the height of the slider depending on the image’s height?

like here: https://themes.shopify.com/themes/brooklyn/styles/classic/preview

Thank you

15

@Arad0423

yes please slider adapt height so that work

16

Hi, I do not understand. the code you gave me is cutting the higher images. I want it to scale the size of the slider for each image( When it is higher image - the slider’s height will be taller, when it is smaller height - the slider’s height will be smaller.

What can I do in the code for this?

It is like that on the Brooklyn Theme.

17

@Arad0423

Brooklyn Theme all image are same size

18

Look from mobile inside product page in Brooklyn theme: https://themes.shopify.com/themes/brooklyn/styles/classic/preview

The slider is change according to the image’s height, Just like in the pictures Im adding

19

@Arad0423

i mean some thing like this

https://codepen.io/bannandr/pen/OQYqRp

adapt height

20

Exactly!

Where do I put the javascript in Dawn theme?

Thank you