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
2313 415 545

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 or looking bad? 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
9218 1567 1937

Hi @Christinahadi ,

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

If helpful then please Like and Accept Solution. Want to Speed up your Shopify Website Guranteed result Whats app
| Hire us
| Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing
For Quick Chat | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
oscprofessional
Shopify Partner
9218 1567 1937

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. Want to Speed up your Shopify Website Guranteed result Whats app
| Hire us
| Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing
For Quick Chat | 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
2313 415 545

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 or looking bad? 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!