Adjust slideshow images to vertical center on Desktop

Shopify Discussion
1

I have a problem centering the images in slideshow on desktop where they are sticked to the left.

On mobile phone there is no issue.

I use this css in the slideshow custom css to resize the image, but dont know how to center it without it being bad on mobile:

.banner__media.media {
background-color: transparent !important;
}
img {
height: 100%;
width: auto;
justify-self: center !important;
}

this is the slideshow: Sizing Guide – Conquer Club

Thanks everyone for help

2

hi, @conquerclub

Please send me Website URL

3

in the OP at Sizing Guide – Conquer Club

4

Add this to the custom css:

img {
left: 50%;
tranform: translateX(-50%);
}

if it doesn’t work, try

img {
left: 50% !important;
tranform: translateX(-50%) !important;
}
5

Image jumps from left to 50% in editor but when I hit save it says:

Online Store editor session can’t be published

and cant be saved

6

can you show me a screenshot of how you are inserting it before saving the theme customizer?

7

Yes that might be the problem, cause I dont know how, ive tried these variants:

.banner__media.media {
background-color: transparent !important;
}
img {
height: 100%;
width: auto;
}

img {

left: 50%;

tranform: translateX(-50%);

}

and then this:

.banner__media.media {
background-color: transparent !important;
}
img {
height: 100%;
width: auto;
left: 50%;

tranform: translateX(-50%);

}

8

this is the only thing changed when the customizer says taht you can’t save?

9

Yes, currentzly it saved like this:

.banner__media.media {
background-color: transparent !important;
}
img {
height: 100%;
width: auto;
}

and saving works

10

I’m sorry. I didn’t notice that I’ve written tranform. Replace it with transform

11

Oh yes, thank you now its working you magician!