How can I adjust banner text placement on mobile in Dawn theme?

Store Design
1

I’m trying to change the placement of the text I have on my banner on mobile only. It only allows me to center the text and move it from left to right. I don’t want the text to be at the center of the page and I need the text to be lower. How can I fix the coding?

2

Hi @LowElanBoutique ,

Can you provide an image to explain what you want so we can provide a code for specific space and stuff?

3

Web-capture_3-9-2022_133332_levizyon.myshopify.com.jpg
Web-capture_3-9-2022_133332_levizyon.myshopify.com.jpg456×715 48.3 KB

I want to move the header, body of text, and button to the bottom right.

4

Hi @LowElanBoutique ,

Thank you for the image. Try this code instead

  1. From your Admin store, go to Online store > Themes > Click Actions > Edit code
  2. Open the Asset folder, and find the base.css file.
  3. Add the code below.
@media only screen and (max-width: 750px) {
.banner__box.content-container.content-container--full-width-mobile {
    display: flex;
    align-self: flex-end;
    flex-direction: column;
    align-items: flex-end;
}
}
5

THANK YOU SO MUCH! It worked!

6

To ask a related question - does anyone know how to add a 3rd text box to the banner image?

So I could have a h1, subtitle, paragraph, buttons?