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

Strange request - Using the slideshow section there is the option to stack text underneath the image om mobile Does anyone know how to force this layout on desktop also? I need to keep the slider functionality the same, just have the text and button displaying under the image on desktop.

Thanks

2 Likes
2

give me your store url

3

Hi

My store URL is https://jddfurniture.myshopify.com/ password: test

Thank you

4

I’ve looked at your desktop image and if that’s the case your desktop image size is a bit large and the first screen won’t show the text piece.

Simonsron_0-1674035624944.png
Simonsron_0-1674035624944.png1916×2126 780 KB

like this?

5

Did you get solution to your request?

6

Yes just like that! I can make the actual image smaller for the slider that’s not a problem.

7

For anyone who runs into this I figured out the solution myself. In the customiser make sure that the ‘show container on desktop’ is selected and paste the following code into either a custom css file or plugin:

/– Display slideshow text underneath on desktop –/
@media screen and (min-width: 750px) {
.banner__media {
height: 100% !important;
position: inherit !important;
left: 0 !important;
top: 0 !important;
width: 100% !important;
padding-bottom: 25% !important;
}
}
@media screen and (min-width: 750px) {
.slideshow__text-wrapper.banner__content {
height: 100% !important;
padding: 0 !important;
margin: 0 !important;
width: 100% !important;
max-width: 2000px !important;
}
}
.slideshow__text.banner__box {
max-width: 2000px !important;
width: 100%;
}

8

/– Display slideshow text underneath on desktop –/
@media screen and (min-width: 750px) {
.banner__media {
position: inherit !important;
}
}
@media screen and (min-width: 750px) {
.banner__media {
height: 600px !important;
}
}
@media screen and (min-width: 750px) {
.slideshow__text-wrapper.banner__content {
height: auto !important;
padding: 0rem !important;
}
}
.banner {
display: inherit !important;
position: relative;
}
@media screen and (min-width: 750px) {
.banner__content {
padding: 1rem !important;
}
}

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
10

Hi,

I have the same issue. I tried this code and the container got under the slideshow as wished (thank you for that) but it’s not full width. I’ve tried to make changes to the code to make the container full width, as it is on mobile, but didn’t succeed. How can I do it?

11

Everything worked perfectly with this, but now my image is squished down pretty flat in desktop view. Is there a way to fix that?