Re: Custom CSS needed for altering Slideshow in "Dawn"

Solved

Custom CSS needed for altering Slideshow in "Dawn"

selannastudio15
Tourist
8 0 4

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: 

selannastudio15_1-1725878144919.png

 

 

 

Screenshot Mobile Version: 

selannastudio15_2-1725878195111.png

 

Accepted Solution (1)
namphan
Shopify Partner
1614 202 220

This is an 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;
}
}
Coffee tips fuels my dedication.
Shopify Development Service
Need help with your store? namphan992@gmail.com

View solution in original post

Replies 4 (4)

Made4uo-Ribe
Shopify Partner
8858 2118 2602

Hi @selannastudio15 

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

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.

namphan
Shopify Partner
1614 202 220

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;
}
Coffee tips fuels my dedication.
Shopify Development Service
Need help with your store? namphan992@gmail.com
namphan
Shopify Partner
1614 202 220

This is an 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;
}
}
Coffee tips fuels my dedication.
Shopify Development Service
Need help with your store? namphan992@gmail.com
selannastudio15
Tourist
8 0 4

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