Stack slideshow text and button over image

Store Design
, ,

Topic summary

A user is attempting to reposition slideshow elements on mobile so that text and buttons appear above (stacked on top of) the image instead of overlaying it.

Initial Attempts:

  • A community helper provided CSS targeting the slideshow’s flex-direction to stack elements vertically on screens under 749px width.
  • Multiple iterations with !important flags were tested but failed to produce the desired layout.

Complicating Factors:

  • The changes are being made to an unpublished theme version (11.0), which may affect CSS application.
  • An override code elsewhere in the theme is preventing the base.css modifications from taking effect.

Latest Development:

  • The helper suggested more specific CSS using flex-order properties and placement in theme.liquid instead of base.css.
  • The user has since switched from a slideshow to an image banner format, asking if different code would be needed for this new setup.

Status: Unresolved. The discussion remains open as the layout change has not successfully been implemented, and the component type has changed mid-troubleshooting.

Summarized with AI on November 18. AI used: claude-sonnet-4-5-20250929.
1

I am updating my theme and need to stack the text and button on mobile on top of the slideshow image. How can I do this? Screenshots attached.

Screenshot 2023-08-02 at 1.50.00 PM.png
Screenshot 2023-08-02 at 1.50.00 PM.png1020Ă—1204 110 KB

Screenshot 2023-08-02 at 1.50.23 PM.png
Screenshot 2023-08-02 at 1.50.23 PM.png1126Ă—1242 114 KB

1 Like
2
3

Hi @EZ7 ,

Try this one.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
  4. And Save.
@media only screen and (max-width: 749px){
div#Slide-template--18596832051519__slideshow-1 {
    flex-direction: column;
}
}

Result:

Ribe_Dagandara_0-1691003328893.png
Ribe_Dagandara_0-1691003328893.png682Ă—420 74.7 KB

I hope it help.

4

That does not work, I want the text and button above the image.

1 Like
5

Can you add !important on it..

@media only screen and (max-width: 749px){
div#Slide-template--18596832051519__slideshow-1 {
    flex-direction: column !important;
}
}
6

That still is not working unfortunately

7

I am trying to do this to the 11.0 version of my store, it has not been published yet. Could that be the reason why this is not working?

8

Oh, okay I know now why its not working.

Can you please paste this one in the theme.liquid.

Paste it before this code.

Ribe_Dagandara_0-1691010753238.png

9

Nope, there is an overide code which not place on the right place that is why the base.css would not listen. That is what I think.

10

Is there any way around that?

11

Hello?

12

Hi,

Can you try again this one. Thanks!

@media only screen and (max-width: 749px){
div#Slider-template--18596832051519__slideshow {
    display: flex;
}
div#Slide-template--18596832051519__slideshow-1 {
    flex: 1;
}
.slideshow__text-wrapper.banner__content.banner__content--middle-left.page-width:nth-child(2) {
    order: 1;
}
.slideshow__media.banner__media.media:nth-child(1) {
    order: 2;
}
}

Same Instructions.

13

If my solution work please Mark as Solution and Likes. Ive already tell you the possible solution its up to you if you dont like it. Thanks!

14

I’d love to, but it did not work. I changed it from a slideshow to image banner, perhaps different code for the image banner could work instead?