Dawn theme Slideshow Mobile view on desktop

Store Design
, ,

Topic summary

A user seeks to replicate Shopify Dawn theme’s mobile slideshow layout (text stacked below image) on desktop view while maintaining slider functionality.

Problem: Desktop slideshow displays text overlaid on images, but the user wants text positioned underneath as it appears on mobile.

Solution Provided: The original poster solved this themselves using custom CSS code that:

  • Requires enabling ‘show container on desktop’ in the customizer
  • Uses media queries targeting screens 750px+ width
  • Modifies .banner__media, .slideshow__text-wrapper.banner__content, and related classes
  • Repositions elements to stack vertically

Follow-up Issues:

  • One user reports the container doesn’t extend to full width after applying the code
  • Another user experiences image distortion (images appearing squished/flattened) on desktop after implementation

The discussion remains open with unresolved questions about achieving full-width containers and preventing image compression when using this CSS workaround.

Summarized with AI on November 11. AI used: claude-sonnet-4-5-20250929.
9 
/*-- Display slideshow text underneath on desktop --*/
.slideshow__media.banner__media.media {
    position: relative !important;
}
@media screen and (min-width: 749px) {
.banner--medium:not(.banner--adapt) {
    min-height: 100rem !important;
}
}
@media screen and (min-width: 749px) {
.slideshow__text-wrapper.banner__content {
    height: auto !important;
    padding: 0rem !important;
}
}
1 Like