Dawn Theme Font Size and Padding of Banner Text on Mobile and Desktop

Store Design
1

Hello!

I am working on the Banner of the Dawn Theme for the home page and it’s giving me a big headache.

Font Size:

The title of the banner is set as big dimension, for desktop it works fine, but for the mobile is way too big and would end up overlapping the image, making it not neat and clear. How to change the font size for Mobile and make it smaller?

Text Padding:

Also for both mobile and desktop I would like to move the text closer to the edge of the image - right now the text is closer to the centre. From the code I can see that the banner text is set to a 5rem padding (50px).

Text Alignment:

Additionally, I’d like to have the first title in one line, right now it is divided in two rows. I guess for the mobile version, it would resolve with the font size change, but for the desktop I do not know.

The theme is not live, as I am currently working on it, but here below the images from the editor to show you the issues.

Thank you

Banner Desktop
Banner Desktop1903×809 178 KB

Banner Mobile
Banner Mobile1881×845 166 KB

2

@Quondy
Welcome to the Shopify community!
Thanks for your good question.

Please share your store URL.
So that I will check and let you know the exact solution here.

3

Welcome to shopify community.

Please share your store URL and if your store is password protected then please provide password too.

Thank you.

4

the store url is this

https://mastrozavattistore.com/

5

Hi @Quondy ,

Please share your store URL and if your store is password protected then please provide password too.

So that we can help you.

Thank you.

6

https://mastrozavattistore.com/

7

Please add below css in bottom of assets/base.css file

@media only screen and (max-width:767px) {

.banner__heading span {
font-size: 24px;

}

}

8

Hello @Denishamakwana

This code works good for the font size on mobile. But still the text on mobile is moved towards the center. How to align it more towards the edges of the image?

9

Please add below css in bottom of assets/base.css file

@media only screen and (max-width:767px) {

.banner__box {

padding: 4rem 1.5rem;

}

}

Thank you.

10

Hi @Quondy ,

You can follow the instruction below:

  1. Go to Online Store->Theme->Edit code
  2. Asset->/base.css->paste below code at the bottom of the file:
@media (max-width: 767px) {
.banner--content-align-mobile-left .banner__box {
    padding-left: 10px !important;
}
.banner__heading span {
    font-size: 22px !important;
}
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

11

@AvadaCommerce

Thank you so much! The code provided works good for the font size and text alignment on mobile.

For the desktop how to move the text towards the edges of the image and make the title in one single row?

12

Hi @Quondy ,

You can follow the instruction below:

  1. Go to Online Store->Theme->Edit code
  2. Asset->/base.css->paste below code at the bottom of the file:
@media (min-width: 750px) {
.banner__content.banner__content--top-left {
    margin-left: 0 !important;
    padding-left: 0;
}
.banner--content-align-left.banner--desktop-transparent .banner__box {
    max-width: 720px;
}
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

13

@AvadaCommerce thank you! It worked to move the text to the left.

But still the text is showing in 3 rows. How to make “Leather Shoes for Men” in a single row?

Quondy_0-1648800183734.png
Quondy_0-1648800183734.png1899×1012 239 KB