How can I optimize the Dawn theme banner image for mobile view?

Store Design
1

Hallo,

I use the Dawn-Theme and I have the following issue.

As you can see, on the desktop variant, the text looks very nice within the image.

MS7_1-1656676935446.png
MS7_1-1656676935446.png1915×649 180 KB

But on the mobile variant not. The font is too big and all in all it doesn’t looks good.

I know that it is possible to choose “Stack images on mobile”, but I would like to have the text also in the mobile variant on the bannerimage.

MS7_0-1656676886344.jpeg
MS7_0-1656676886344.jpeg1080×1920 169 KB

Does anyone have an idea or a css-code to fix this problem?

Thanks for all your help

2

Hello. You need to go to the theme settings / open base.css and add the code at the very bottom:

@media screen and (max-width: 750px) {
  .banner__heading {
  font-size: 100%;
  }
}

Where “100%” can adjust the size more or less

3

Hallo,

many thanks for your answer and it worked.

So this is my CSS:

@media screen and (max-width: 750px) {
.banner__heading {
font-size: 160%;
color: #76acca !important;
padding-top: 170px;
font-weight: 900;
line-height: 1.5;
}
}

And the result:

MS7_0-1656917278655.png
MS7_0-1656917278655.png549×643 231 KB

There is just one thing left. I would like to have a yellow background color so it looks like this:

MS7_1-1656917346462.png
MS7_1-1656917346462.png603×570 229 KB

And I know how I should do it:

WIR HABEN DAS BETTZEUG DAZU, DIE WELT ZU VERÄNDERN 

But how I can add “style=“background-color: #FEF7D8”>” to the HTML-Page in Shopify? Or is there another way to address the “span”-Element in CSS?

Many Thanks for your help.