Dawn theme: Image Banner Text and Button customization for Mobile

SanSimons
New Member
5 0 0

Hi there,

Hoping someone can help me with my image banner for mobile on the Dawn theme. Currently, it's perfect for Desktop but on Mobile, the heading, text and Shop now button are too large and cover the entire image. I would like all 3 elements: the Heading, Text and Shop now button to be:

 

1. Smaller in font size

2. Close to the bottom of the image (like how it is on Desktop)

 

My store URL is https://cubbabubba.ca/ and password is neowis

 

Thanks in advance for the help!

Replies 5 (5)

Michael_Pink
Shopify Partner
446 77 107

Hi @SanSimons 
I think you can add different image for mobile
I hope this video can help you: https://youtu.be/JanT6cP28G0
But if you want to reduce font size you can add this code into the bottom of section-banner-image.css file

@media screen and (max-width: 749px) {
.banner .banner__heading{
font-size: 12px;
}
.banner .banner__text.subtitle {
font-size: 12px;
}
.banner .banner__buttons .button{
font-size: 10px;
line-height: 1.5;
min-height: initial;
padding: 10px 0;
}
}
My life is sharing!
I hope my solution can help you save at least 1$
Build Page faster with: PageFly PageBuilder App.

shopify.expert.team@gmail.com
SanSimons
New Member
5 0 0

Hi Michael,

 

Thanks so much for your response. It looks like your code helped reduce the font size but the placement of the content is still in the centre of the banner on Mobile. Is there anything I can do to move it further down?

 

Thank you!

San

Michael_Pink
Shopify Partner
446 77 107

Hi @SanSimons 
As I see the content is aligned on bottom of the image.
How do you want to move the content?

My life is sharing!
I hope my solution can help you save at least 1$
Build Page faster with: PageFly PageBuilder App.

shopify.expert.team@gmail.com
SanSimons
New Member
5 0 0

Hi Michael,

I found the requisite code on a different Shopify Community post. I added the following code just before "</head>" in my theme.liquid file and it seems to have worked.

 

Thanks so much for your help with the font size!

houseofsayesha
Visitor
1 0 0

Hi, I am facing the same issue. Could you please help me with the code?