Dawn theme Slideshow Mobile view on desktop

[Gumf]

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

[Simonsron]

give me your store url

[Gumf]

Hi

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

Thank you

[Simonsron]

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.

like this?

[Gumf]

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

[Gumf]

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

[DeepVyas]

Did you get solution to your request?

[Gumf]

/*-- 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;
}
}

[Gumf · Accepted solution]

/*-- 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;
}
}

[type1]

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?

[kaluhapet]

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