Solved

Dawn theme h1 in banner is too big for mobile version

vincenzomeschi
Tourist
5 0 2

When I switch to mobile view on the home page, the header that says "TOTALLYVAPOR" gets cut off and ruins the aesthetic. I would like to add some custom code to resize for mobile but cant find it anywhere else on the internet so I'm coming to the forums.

 

Also if anyone has any suggestions on how I can make the background images look better when they stack on mobile I'd appreciate that too 🙂

 

https://totallyvapormerch.myshopify.com/

password: deolyi

Accepted Solution (1)

made4Uo
Shopify Partner
3804 713 1124

This is an accepted solution.

Hi @vincenzomeschi,

 

Try this code below. 

1. In your Admin page, go to Online store > Themes
2. Choose the theme you want to edit then click Actions > Edit code. 
3. Open the base.css under the Asset folder. 
4. Add the code below. 

 

@media only screen and (max-width: 750px) {
.banner__content.banner__content--middle-left.page-width {
    width: 60%;
}

h2.banner__heading.h0 > span {
    font-size: clamp(20px, 4vw, 40px);
}

#Banner-template--14937396281480__image_banner > div:nth-child(2) {
    position: absolute;
    width: 65%;
}
}

 

This is what it looks like with the code above.

made4Uo_0-1655938261095.png

 

 

 

Volunteering to assist you!  Likes and Accept as Solution  is highly appreciated.✌
Coffee fuels my dedication. If helpful, a small Coffee Tip would be greatly appreciated.
Need EXPERIENCED Shopify developer without breaking the bank?
Hire us at Made4Uo.com for quick replies.
Stay in control and maintain your security by avoiding unnecessary store access!

View solution in original post

Replies 10 (10)

made4Uo
Shopify Partner
3804 713 1124

This is an accepted solution.

Hi @vincenzomeschi,

 

Try this code below. 

1. In your Admin page, go to Online store > Themes
2. Choose the theme you want to edit then click Actions > Edit code. 
3. Open the base.css under the Asset folder. 
4. Add the code below. 

 

@media only screen and (max-width: 750px) {
.banner__content.banner__content--middle-left.page-width {
    width: 60%;
}

h2.banner__heading.h0 > span {
    font-size: clamp(20px, 4vw, 40px);
}

#Banner-template--14937396281480__image_banner > div:nth-child(2) {
    position: absolute;
    width: 65%;
}
}

 

This is what it looks like with the code above.

made4Uo_0-1655938261095.png

 

 

 

Volunteering to assist you!  Likes and Accept as Solution  is highly appreciated.✌
Coffee fuels my dedication. If helpful, a small Coffee Tip would be greatly appreciated.
Need EXPERIENCED Shopify developer without breaking the bank?
Hire us at Made4Uo.com for quick replies.
Stay in control and maintain your security by avoiding unnecessary store access!
vincenzomeschi
Tourist
5 0 2

That looks amazing! Thank you! Is there a way you can make the content left-aligned as well?

vincenzomeschi
Tourist
5 0 2

Example.jpg

made4Uo
Shopify Partner
3804 713 1124

Hi @vincenzomeschi,

 

Here you go

 

@media only screen and (max-width:750px) {
.banner__box.content-container.content-container--full-width-mobile.color-background-2.gradient {
    text-align: left;
}
}
Volunteering to assist you!  Likes and Accept as Solution  is highly appreciated.✌
Coffee fuels my dedication. If helpful, a small Coffee Tip would be greatly appreciated.
Need EXPERIENCED Shopify developer without breaking the bank?
Hire us at Made4Uo.com for quick replies.
Stay in control and maintain your security by avoiding unnecessary store access!
vincenzomeschi
Tourist
5 0 2

Awesome. The heading still has the "R" in Vapor cut off as shown in the screenshot above.

vincenzomeschi
Tourist
5 0 2

@media only screen and (max-width: 750px) {
.banner__content.banner__content--middle-left.page-width {
width: 70%;
}

 

Changed width to 70% and works just fine.

Wanderlvst
Visitor
2 0 0

Hello Made40. I am having the same issue where the banner looks good on desktop but gets cut off on mobile. I tried copying and pasting the code as instructed but it still did not work. Please help.

made4Uo
Shopify Partner
3804 713 1124

Hi @Wanderlvst,

 

What is your website?

Volunteering to assist you!  Likes and Accept as Solution  is highly appreciated.✌
Coffee fuels my dedication. If helpful, a small Coffee Tip would be greatly appreciated.
Need EXPERIENCED Shopify developer without breaking the bank?
Hire us at Made4Uo.com for quick replies.
Stay in control and maintain your security by avoiding unnecessary store access!
Wanderlvst
Visitor
2 0 0

Hey Made4Uo.

 

My website is https://wanderlvstapparel.com/

Thehandmadebar
Excursionist
19 2 0

Hello, I tried this code below and nothing happened, can you please help me?07BBA891-C987-4F05-A705-3A662E9A8E6F.png