Custom CSS needed for altering Slideshow in "Dawn"

Store Design
, ,

Topic summary

A Shopify store owner using the Dawn theme needed help repositioning their slideshow layout on desktop.

The Problem:

  • Desktop version: Images filled the entire slide dimensions with product descriptions overlaying the center
  • Mobile version: Already working correctly with full images visible and descriptions positioned below
  • Goal: Make desktop match mobile behavior—show complete images centered within the slide with descriptions underneath

The Solution:
A community member (namphan) provided custom CSS code to be added to the base.css file. The code included:

  • Media queries for screens 750px and wider
  • Adjustments to slideshow banner positioning (relative positioning)
  • Height and width modifications (auto height, max-width 500px)
  • Padding and margin resets for proper spacing

Outcome:
The CSS solution successfully resolved the issue, achieving the desired desktop layout that matched the mobile version’s appearance.

Summarized with AI on November 6. AI used: claude-sonnet-4-5-20250929.
1

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
selannastudio15_1-1725878144919.png1920Ă—1080 292 KB

Screenshot Mobile Version:

selannastudio15_2-1725878195111.png
selannastudio15_2-1725878195111.png1920Ă—1080 230 KB

1 Like
2

Hi @selannastudio15

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

3

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;
}
4

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;
}
}
1 Like
5

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

1 Like