Custom CSS needed for altering Slideshow in "Dawn"

[selannastudio15]

Hi there dear Community, 

I am at my wits end once again. In the screenshot below you can see my slideshow. In the desktop version it currently fills the hight and width of my slideshow with my pictures and then places the product descrition smack dab in the middle of the slideshow, 

Instead, I would like to have it so the whole picture is visible in the middle of the slide without it filling the whole width and and hight of the slide and the description placed under it, On the mobile version this works just fined and looks neat. I will provide screenshots below. Surely this can be solved with a custom CSS. 

I hope I was able to describe my issue properly so you understand what I'm after. And I hope you can once again help me out here. 

Thanks in advance and all the best, 

Georgia

Screenshot Slideshow Desktop: 

Screenshot Mobile Version: 

[Made4uo-Ribe]

Hi @selannastudio15 

Would you mind sharing your store URL? or you can PM me. Thanks!

[namphan]

Hi @selannastudio15,

Please go to Actions > Edit code > Assets > base.css file and paste this at the bottom of the file:

.slideshow__media.banner__media.media,
.slideshow__media.banner__media.media>img {
    position: relative !important;
}

[namphan · Accepted solution]

Hi @selannastudio15,

Please go to Actions > Edit code > Assets > base.css file and paste this at the bottom of the file:

@media screen and (min-width: 750px) {
#Slider-template--22549800419662__slideshow_jGFzgF::before {
    padding-bottom: 0 !important;
    height: auto;
}
.slideshow__media.banner__media.media {
    position: relative !important;
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
}
.slideshow__text-wrapper.banner__content {
    height: auto !important;
    padding: 1rem !important;
}
}

[selannastudio15]

Fantastic job, Namphan. Exactly what I had in mind. Thank you so much for your help 😀