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

Technical Q&A
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.png
Screenshot 2021-09-23 at 17.13.25.png1059×1517 135 KB

Screenshot 2021-09-23 at 17.13.49.png
Screenshot 2021-09-23 at 17.13.49.png2210×1510 471 KB

2

Hi @Christinahadi ,

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

3

https://contour-lab.myshopify.com/

No password needed

4

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)

5

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

Would you know any other solution? Thank you!

6

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

7

@Christinahadi ,

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

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

Kind regards,
Diego

8

Thank you Diego!

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

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