Change the size of headline on mobile only?

Site URL: https://www.bambinigroup.com/

Hi there,

I'm trying to adjust the size of the headline "bambini" on mobile only. The size on desktop is perfect but I would like it to fit within the mobile screen (right now it says: "bamb"). Any CSS code wizards who can give me advice or a suggestion?

Thanks so much!

@media screen and (max-width: 600px) {
  h1 {
    font-size: 20vw;
  }
}

Give this a go.

Thank you for your prompt response. It didn't work - looks exactly the same. 😞 

46 minutes ago, deliberatemom said:

Thank you for your prompt response. It didn't work - looks exactly the same. 😞 

This should do it, and work better

@media screen and (max-width: 600px) {
  h1#sqs-slash-page-header {
    font-size: 20vw !important;
  }
}

Hmmmm - it still didn't work. Looks the same.

1 hour ago, deliberatemom said:

Hmmmm - it still didn't work. Looks the same.

What browser are you using? Are you adding this to the CSS section?

16 hours ago, rwp said:

@media screen and (max-width: 600px) {
  h1 {
    font-size: 20vw;
  }
}

Give this a go.

She uses Cover Page. Custom CSS doesn't affec Cover page.

13 hours ago, deliberatemom said:

Hmmmm - it still didn't work. Looks the same.

Add to Page Settings > Advanced > header

<style>
  @media screen and (max-width: 600px) {
  h1#sqs-slash-page-header {
    font-size: 20vw !important;
  }
}
</style>

@tuanphan Thanks! I didn't know that!

4 hours ago, tuanphan said:

She uses Cover Page. Custom CSS doesn't affec Cover page.

Add to Page Settings > Advanced > header

<style>
  @media screen and (max-width: 600px) {
  h1#sqs-slash-page-header {
    font-size: 20vw !important;
  }
}
</style>

 

That worked! Thank you so much! 🙂