Solved

Dawn- can I change the design of a title on homepage in mobile version only?

Christinahadi
Excursionist
34 0 5

Dear,

 

Can anyone help me in adapting the position & alignment of a title on my homepage for the mobile version only?

On desktop it does what I want it to, but on mobile version it looks really big and not put right.

Thank you!

Screenshot 2021-09-23 at 17.13.25.pngScreenshot 2021-09-23 at 17.13.49.png

Accepted Solution (1)
diego_ezfy
Shopify Partner
2907 557 872

This is an accepted solution.

@Christinahadi,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. In your theme.liquid file, find the </body> (press CTRL + F or command + F on Mac)
3. paste this code right above the </body> tag:

 

 

<style>
@media(max-width:749px){
    .banner__box *{
        font-size: 20px !important;
    }
}
</style>

 

 


This will change the font size on mobile devices, you can replace the 20px for any value you wish. 

Kind regards,
Diego

View solution in original post

Replies 7 (7)

oscprofessional
Shopify Partner
15821 2368 3077

Hi @Christinahadi ,

Welcome to the Shopify community!
Share your store url with password.

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
Christinahadi
Excursionist
34 0 5
oscprofessional
Shopify Partner
15821 2368 3077

Hi @Christinahadi ,

@media only screen and(max-width:749px){
.banner__heading>*, .banner__text>* {
    font-size: 4rem;
}
}

Add this css at the bottom of
Online Store->Theme->Edit code->Assets->section-image-banner.scss.liquid

Note : If your store is having this media already (for mobile version) then no need to add whole code . Only just add css in that media ie 749px(already exist)

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
Christinahadi
Excursionist
34 0 5

Hmm, didn't see any change in the text yet.

Would you know any other solution? Thank you!

Christinahadi
Excursionist
34 0 5

Is there anyone that can help me please? Thank you!

diego_ezfy
Shopify Partner
2907 557 872

This is an accepted solution.

@Christinahadi,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. In your theme.liquid file, find the </body> (press CTRL + F or command + F on Mac)
3. paste this code right above the </body> tag:

 

 

<style>
@media(max-width:749px){
    .banner__box *{
        font-size: 20px !important;
    }
}
</style>

 

 


This will change the font size on mobile devices, you can replace the 20px for any value you wish. 

Kind regards,
Diego

Christinahadi
Excursionist
34 0 5

Thank you Diego!

The font in my button doesn't change with it..

Could you add some code for that too, please? Thanks!