Have your say in Community Polls: What was/is your greatest motivation to start your own business?

Re: Adjust slideshow images to vertical center on Desktop

Solved

Adjust slideshow images to vertical center on Desktop

conquerclub
Tourist
6 0 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

 

 

Accepted Solution (1)
Uhrick
Shopify Partner
433 68 102

This is an accepted solution.

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

Shopify Developer
Hire me for theme customizations at ricardomsilvestre@outlook.com or Upwork
Was my answer helpful to you? Please like or mark as solution

View solution in original post

Replies 10 (10)

topnewyork
Globetrotter
748 124 139

hi, @conquerclub 

Please send me Website URL

Need a Shopify developer?
Hire us at Top New York Web Design
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Try Big Bulk Discount To Boost Your Store Sales with Volume/Tier Discount
conquerclub
Tourist
6 0 1

Uhrick
Shopify Partner
433 68 102

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;
}
Shopify Developer
Hire me for theme customizations at ricardomsilvestre@outlook.com or Upwork
Was my answer helpful to you? Please like or mark as solution
conquerclub
Tourist
6 0 1

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

Uhrick
Shopify Partner
433 68 102

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

Shopify Developer
Hire me for theme customizations at ricardomsilvestre@outlook.com or Upwork
Was my answer helpful to you? Please like or mark as solution
conquerclub
Tourist
6 0 1

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%);

}

Uhrick
Shopify Partner
433 68 102

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

Shopify Developer
Hire me for theme customizations at ricardomsilvestre@outlook.com or Upwork
Was my answer helpful to you? Please like or mark as solution
conquerclub
Tourist
6 0 1

Yes, currentzly it saved like this: 

 

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

 

and saving works

Uhrick
Shopify Partner
433 68 102

This is an accepted solution.

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

Shopify Developer
Hire me for theme customizations at ricardomsilvestre@outlook.com or Upwork
Was my answer helpful to you? Please like or mark as solution
conquerclub
Tourist
6 0 1

Oh yes, thank you now its working you magician!