Dawn theme Slideshow Mobile view on desktop

Store Design
, ,
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?