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

Solved
Christinahadi
Tourist
26 0 1

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

0 Likes

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
0 Likes
Christinahadi
Tourist
26 0 1
0 Likes

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
0 Likes
Christinahadi
Tourist
26 0 1

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

Would you know any other solution? Thank you!

0 Likes
Christinahadi
Tourist
26 0 1

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

0 Likes

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 section not looking good or cutting off? Try the Slideshow (PRO) section. No apps required.
◦ Replace apps with copy/paste code snippets. Examples here.
◦ In need of coding help? I'm available for hire! ezfycode@gmail.com
0 Likes
Christinahadi
Tourist
26 0 1

Thank you Diego!

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

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

0 Likes