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

Solved
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)

Accepted Solutions
diego_ezfy
Shopify Partner
2300 413 541

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

◦ Slideshow images cutting off? Try the Slideshow (PRO) section. No apps required. | Replace apps with copy/paste code snippets & save money. Examples here.

View solution in original post

Replies 7 (7)
oscprofessional
Shopify Partner
9187 1561 1927

Hi @Christinahadi ,

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

If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
oscprofessional
Shopify Partner
9187 1561 1927

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)

If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
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
2300 413 541

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

◦ Slideshow images cutting off? Try the Slideshow (PRO) section. No apps required. | Replace apps with copy/paste code snippets & save money. Examples here.

View solution in original post

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!