Product image mobile dawn theme

Store Design
1

Hey guys the dawn theme has got some annoying product picture sizing. for any reason you can see part of the second picture, any workaround to set this right? so that really only one picture in the screen ?

mobil bildansicht.PNG
mobil bildansicht.PNG665Ă—630 158 KB

2

Hello @marvinsignpoint ,

A we know this is a feature so customers can know another image is also available in the gallery.

btw still if you don’t need it you have you find its JS and change this attribute

centerMode: true

to

centerMode: false

Thanks

3

Hey @marvinsignpoint

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

4

Hello @marvinsignpoint
your website is password protected.

5

hey guys url is: https://schieferarts.de/

password: schiefer

best

marvin

6

pw; is schiefer :))

7

url is: https://schieferarts.de/

password: schiefer

best

marvin

8

hey url is: https://schieferarts.de/

password: schiefer

best

marvin

9

Hey @marvinsignpoint

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 tag

RESULT:

Moeed_0-1723462046843.png
Moeed_0-1723462046843.png255Ă—562 90 KB

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

Best Regards,
Moeed

10

hey moeed this doesnt looks like an acceptable solution because the product image then will be not centered as seen in your picture.

best

marvin

11

hey guleria,

do you may know which JS file this is?

best marvin

12

Go to online store ----> themes ----> actions ----> edit code ---->base.css
add this code at the end of the file.

@media screen and (max-width: 749px) {
.grid--peek.slider--mobile .grid__item {
margin: 10px !important;
}
}

result

24.png
24.png430Ă—832 204 KB

If this was helpful, hit the like button and accept the solution.
Thanks

13

hey Rahul,

is there any solution to center the picture after adding this code? It looks good but the product image is not centered then :confused: the is more space on the right side

14

OKay please remove previous code and use this one .

@media screen and (max-width: 749px) {
.product-media-container.constrain-height {
    margin-right: 20px;
    margin-left: 20px;
}
}
1 Like
15

this didnt work :confused:

16

this one worked!

@media screen and (max-width: 749px) {
.grid–peek.slider–mobile .grid__item {
margin-right: 20px;
margin-left: 20px;
}
}

1 Like