Shopify themes, liquid, logos, and UX
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:
Solved! Go to the solution
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;
}
}
Would you mind sharing your store URL? or you can PM me. Thanks!
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;
}
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;
}
}
Fantastic job, Namphan. Exactly what I had in mind. Thank you so much for your help 😀
The year-end shopping spree is around the corner! Is your online store ready for the ...
By JasonH Nov 10, 2024We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024