How can I vertically center product images in DAWN?

[Revlon]

Please, we want to cwnter product images verticaly in its container:

This doing it' job only while loading, on load picture is on top again:

.product:not(.product--no-media):not(.featured-product) .product__media-wrapper{
justify-content: center !important;
align-items: center !important;

Karum and other experts-we kindly ask for help:

https://cocoparfemi.com/products/burberry-burberry-edp-100ml-tester-lady

[made4Uo · Accepted solution]

Hi @Revlon,

My understanding that you want to center the product image only. Therefore, please follow the instructions below

1. From your Admin Page, click Online Store > Themes >Actions > Edit code
2. In the Asset folder, open the base.css
3. Paste the code below at the very bottom of the file. Please choose between A, B, C code base on the outcome you want

A.

#Slide-template--15759526428821__main-27244995412117 > modal-opener > div > img {
    transform: translateY(30%);
}

This is the outcome:

B.

.product.product--small.product--stacked.grid.grid--1-col.grid--2-col-tablet {
    margin-top: 5rem;
}

This is the outcome:

C:

.product.product--small.product--stacked.grid.grid--1-col.grid--2-col-tablet {
    align-items: center;
}

#Slide-template--15759526428821__main-27244995412117 > modal-opener > div > img {
    transform: translateY(20%);
}

This is the outcome:

[KetanKumar · Accepted solution]

@Revlon 

can you please try this code

1. Go to Online Store->Theme->Edit code
2. Asset->/section-main-product.css ->paste below code at the bottom of the file.

.product.grid {
    align-items: center !important;
    justify-content: center !important;
    margin-top: 30px !important;
}

[NerdCurator]

@Revlon I can see only one image on the product link you have attached. Can you please explain what are you looking for ?

[Revlon]

*center

*Karum

Tnx so much for interest NerdCurator...

We want to center it vertically in container... We suceed it with code above but only in loading time...

Onload it is on top again 😞

We want very same effect with every product image.

(

Images are limited by us on max-height:320px 

Container is defined at 320px..

But if height is lower we want to be centered...

Sorry for bad english.

[Revlon]

Kumar

[made4Uo · Accepted solution]

Hi @Revlon,

My understanding that you want to center the product image only. Therefore, please follow the instructions below

1. From your Admin Page, click Online Store > Themes >Actions > Edit code
2. In the Asset folder, open the base.css
3. Paste the code below at the very bottom of the file. Please choose between A, B, C code base on the outcome you want

A.

#Slide-template--15759526428821__main-27244995412117 > modal-opener > div > img {
    transform: translateY(30%);
}

This is the outcome:

B.

.product.product--small.product--stacked.grid.grid--1-col.grid--2-col-tablet {
    margin-top: 5rem;
}

This is the outcome:

C:

.product.product--small.product--stacked.grid.grid--1-col.grid--2-col-tablet {
    align-items: center;
}

#Slide-template--15759526428821__main-27244995412117 > modal-opener > div > img {
    transform: translateY(20%);
}

This is the outcome:

[Revlon]

Made4Uo : please only this is need to this post be accepted solution: how to replace this : #Slide-template--15759526428821__main-27244995412117

to work for every product image, not just that one

[Revlon · Accepted solution]

We solved thanks for help... But problem was afterward resizing 

Box size to be = content size

With this parameter instead is ok now:

.grid--peek.slider--mobile .grid__item {
height: 320px;
margin: 0;
}

[KetanKumar · Accepted solution]

@Revlon 

can you please try this code

1. Go to Online Store->Theme->Edit code
2. Asset->/section-main-product.css ->paste below code at the bottom of the file.

.product.grid {
    align-items: center !important;
    justify-content: center !important;
    margin-top: 30px !important;
}

[Revlon]

Thanks you all so much...

We are close to the solution..

It is little bit tricky... Height is limited by us to 320px(we wanted to be same as width on mobile, it is optimized for mobile, but we did not kbow how to define in relative for height to be same as full width) 

Nevermind, align-items should but dont resolve (because it somehow short image height and container probbably)

But we did not want to move just from top... (On mobile than it is over other elements, overflow etc...) We want to center...

Anyway this part of code help us combing with other image and container parameters:

#Slide-template--15759526428821__main-27244995412117 > modal-opener > div > img { transform: translateY(20%); }

But aranged like this:

#Slide-template--15759526428821__main-27244995412117 > modal-opener > div > img { transform: height: 320px; }

It resolve issue but just for that one product. Please to all: how to define this part:

 #Slide-template--15759526428821__main-27244995412117

To be as much it can be abstract(what is word for opposite of concrete? 🙂 

So it resolve issues for all products not just one(and perhaps not specific for only this shop if somebody in future find this thread)

Sorry for catastrofic english... 

Any sugestions about site(it looks terrible on desktop 😕 ) www.cocoparfemi.com are wellcomed.

Thank you all and they should ypu pay better for such strong support to sopify clients 🙂

#Slide-template--15759526428821__main-27244995412117 > modal-opener > div > img { transform: translateY(20%); }

[Revlon]

All of this is amateur work sorry for asking simple questions...

We need this part without numbers of product 🙂 (and if it is possible page itself):

#Slide-template--15759526428821__main-27244995412117

It will resolve.

Sorry for stupid question we tried with "(.slide-template) (__) (.main-product)" and such combinations but we failed to realize that correct one

[Revlon]

We tried to start with .modal-opener without prefix but it is not working 😞

Please: how to define that?

Thanks in advance to all experts!

[Jahid-KlinKode]

Hi @Revlon, discover a solution for centering product images vertically in the Shopify Dawn Theme by watching this YouTube video: https://www.youtube.com/watch?v=LNCzj6cxw1s.