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.
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