Solved

Dawn theme Slideshow Mobile view on desktop

Gumf
Shopify Partner
22 1 0

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

Accepted Solution (1)

Gumf
Shopify Partner
22 1 0

This is an 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;
}
}

View solution in original post

Replies 9 (9)

Simonsron
Shopify Partner
699 87 121

give me your store url

banned
Gumf
Shopify Partner
22 1 0

Hi

 

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

 

Thank you

Simonsron
Shopify Partner
699 87 121

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

like this?

 

banned
Gumf
Shopify Partner
22 1 0

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

Gumf
Shopify Partner
22 1 0

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
Shopify Partner
700 6 5

Did you get solution to your request?

Shopify Developer | Ⓢ : deepvyas71 | ✉ : deepvyas71@gmail.com

Gumf
Shopify Partner
22 1 0

/*-- 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
Shopify Partner
22 1 0

This is an 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
Visitor
2 0 0

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?