Dawn theme - Slideshow - how to show text container on mobile

Store Design
, , , ,
1

Hi all, this should be easy but I can’t see to figure out the code to do this - in Dawn theme - Customize there is an option on each slide “Show container on desktop” but there is no option for mobile. I need to have the container background showing on mobile so we can read the text over the background image. Weird that there is no option for this. Can someone please let me know the code to display on mobile?

https://elegantlivingsolutions.com.au/

password - sean

2

I see no text besides what is shown as part of the picture (“Elegant Edgeing” not part of shopify)

But, to add a background to the slideshow content, you can this add this code to the custom CSS settings of the section:

.slideshow__text-mobile--center {
  background: white;
}

For just the heading use this:

h2 {
  background: white;
  padding: 10px;
}

To make it different on desktop will require some more coding, or you would have to use two sections, one for desktop one for mobile then hide the other. For example this code would hide the specific section on mobile, then you would replace the max width for desktop and the section ID with the desktop section you want to hide:

 

@media screen and (max-width:749px){
#shopify-section-template--11101274990728__ed564e79-f18f-4564-b421-0ab4e6fc975c {display:none; visibility:hidden;}
}

I hope that helps!
@biznazz101

3

Sorry can you check now to see what I mean - it shows the container background on desktop but not on mobile.

4

Hi there. I know this was a while ago, but can you advise on adding the container to the mobile view? Did the below code actually work?

.slideshow__text-mobile–center {
background: white;
}

Thank you!!

5

Yes it seemed to work thanks!