Responsive headlines

[ArdoHolts]

Hi,

I’m struggling to get my headlines responsive on artsmart.ee site.

Some of my headlines are too long for mobile view and I need them to be scaled down so that all the text is visible. I tried the “responsive text” setting but that did not change anything or I did something wrong.

I need all the titles to stay in h2 or h1.

How to solve this?

I do not understand why the headlines are not responsive by default.

[ruenel]

Hello Ardo,

Thanks for writing in!

Please go to X > Theme Options > Typography and set the Root Font Size so that on smaller screens, the headline will adjust its size responsively.

For more details about the Root Font Sizes, kindly check this out:

• https://theme.co/docs/typography#how-to-set-root-font-characteristics

Hope this helps.

[ArdoHolts]

Hi,

unfortunately that is not the solution as changing the root font sizes makes all the texts smaller. My issue is just with headlines.

[ruenel]

Hello Ardo,

If that is the case, please add a custom inline CSS that changes the font size in smaller screens. You can always make use of the @media() block in the headline element’s inline CSS in the Customize tab.

For example, you can go to Headline > Customize > Element CSS and insert the sample code:

@media(max-width: 767px) {
  $el.text .x-text-content-text-primary {
    font-size: 1em;
  }
}

To know more about the element CSS, please check this out:

• https://theme.co/docs/element-css#all-about-element-css

Please note that the code provided above serves as a guide only and is to help you in getting started so implementing it and maintaining the code will be out of our support scope and for further maintenance for new possible versions of the theme that may cause the customization to break, you will need to hire a developer.

Feel free to make adjustment as you need. Here are some related links for further reading, this could help you in finding and implementing some CSS fixes:

Intro to CSS - https://goo.gl/mFuWQT
How to get CSS selectors - https://goo.gl/BmoH39
Get Started With Viewing And Changing CSS - https://goo.gl/7xFhDa
CSS Media Queries - https://goo.gl/L3ZHNg