Solved

Dawn theme Slideshow Mobile view on desktop

Gumf
Shopify Partner
25 1 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

Accepted Solution (1)

Gumf
Shopify Partner
25 1 1

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 10 (10)

Simonsron
Shopify Partner
699 87 122

give me your store url

banned
Gumf
Shopify Partner
25 1 1

Hi

 

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

 

Thank you

Simonsron
Shopify Partner
699 87 122

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

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

Gumf
Shopify Partner
25 1 1

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
744 7 7

Did you get solution to your request?

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

Gumf
Shopify Partner
25 1 1

/*-- 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
25 1 1

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?

 

kaluhapet
Tourist
3 0 0

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