How can I adjust the text position on a mobile banner using the Dawn theme?

Store Design
1

Hi everyone! I’m using Dawn Theme and I put an image banner with two images as shown in the first picture:

Cattura1.PNG
Cattura1.PNG1301×522 670 KB

In mobile view I chose to have the first picture on the top and the second one on the bottom like this:

Cattura2.PNG
Cattura2.PNG358×536 225 KB

What I’d like to change is the position of the text in the mobile view: by default it is placed in the middle of the first picture, but I want it to be in the middle of the whole banner (second picture included). Is there a way to fix it?

Thanks a lot.

2

Hi @seri ,

Your site looks amazing so far. Based on what you’d said, we recommend trying the following fix:

  1. Go to Online Store → Theme → Edit code

  2. Assets/section-image-banner.css

  3. Paste the following code to the bottom of the file:

@media(max-width: 749px){
.banner--stacked:not(.banner--mobile-bottom):not(.banner--adapt) .banner__content {
    top: 50%;
    transform: translateY(-50%);
 }
}

Hope you’d find this suggestion helpful :slightly_smiling_face:

Best regards,

Layoutbase - drag & drop page builder

1 Like
3

Perfect! Thanks a lot!