Change text position on Slidesow (Dawn Theme)

Store Design
, , ,

Topic summary

Goal: Move slideshow text on mobile (Shopify Dawn) without enlarging the background image when adjusting padding.

What changed:

  • Instead of padding, CSS flex positioning was used so the background image size remains unaffected.
  • Path: Actions > Edit code > Assets > base.css.
  • Add within a mobile media query (max-width: 749px):
    • .slideshow__text.banner__box { min-height: 39rem; justify-content: … }
    • .slideshow__text.banner__box .banner__buttons { margin-top: … }

Iterations:

  • Initial rules didn’t apply; adding !important ensured overrides took effect.
  • First attempt positioned content at the top (justify-content: flex-start; buttons margin-top: 12rem).
  • After the user clarified the desired lower position, the code was updated to:
    • justify-content: flex-end; buttons margin-top: 3rem.

Outcome:

  • User confirmed the final layout matches the marked position on mobile.
  • Images were used to illustrate desired placement and final result.
  • Status: Resolved; helper offered further assistance if needed.
Summarized with AI on December 28. AI used: gpt-5.
1

Hey,

I want to move the text in the picture slideshow on mobile (Dawn Theme). But whenever I change the padding in the CSS code, the background image also gets bigger. Am I doing something wrong?

My website is: https://meme.london

IMG_2379.jpg
IMG_2379.jpg1170Ă—2532 236 KB

2

Hi @annamichielan ,

Please go to Actions > Edit code > Assets > base.css file and paste this at the bottom of the file:

@media screen and (max-width: 749px) {
.slideshow__text.banner__box {
    min-height: 39rem;
    justify-content: flex-start;
}
.slideshow__text.banner__box .banner__buttons {
margin-top: 12rem;
}
}
3

Hi,

Thank you for your response. Unfortunately, the layout didn’t seems to change at all :disappointed_face:

4

Hi @annamichielan ,

Please change code:

@media screen and (max-width: 749px) {
  .slideshow__text.banner__box {
    min-height: 39rem !important;
    justify-content: flex-start !important;
  }
  .slideshow__text.banner__box .banner__buttons {
    margin-top: 12rem !important;
  }
}

it will display like this:

Screenshot.png
Screenshot.png368Ă—574 199 KB

5

Hi Namphan,

sorry I wasn’t clear.

I meant I would like the “meme london sale up to 60% sitewide” to be on the location marked :smiley:

IMG_2379.jpeg
IMG_2379.jpeg1170Ă—2532 247 KB

Thank you :blush:

6

Hi @annamichielan ,

Please change code:

@media screen and (max-width: 749px) {
  .slideshow__text.banner__box {
    min-height: 39rem !important;
    justify-content: flex-end !important;
  }
  .slideshow__text.banner__box .banner__buttons {
    margin-top: 3rem !important;
  }
}
1 Like
7

That’s perfect! Thank you so much :blush:

1 Like
8

Hi @annamichielan ,

If you have any further questions, you can contact me.

Happy to help you