Navigation
Archive / Reducing Headlines on smaller screens
This is archived content. Visit our new forum.

Tagged: 

  • Author
    Posts
  • April 5, 2016 at 5:07 pm #868256

    Peter C
    Participant

    Hi,

    Is there a way to reduce the size of headlines on mobile devices on X and Cornerstone?

    I know there is a responsive headline element, but I’d rather not use that all the time.

    Thanks!

    Peter

    April 5, 2016 at 9:27 pm #868496

    John Ezra
    Member

    Hi Peter,

    Thanks for writing in! It’s possible with some CSS. To assist you with this issue, would you mind providing us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything. Thanks!

    April 6, 2016 at 5:45 am #868969

    Peter C
    Participant

    sure… http://develophealth.com

    April 6, 2016 at 9:00 am #869324

    Zeshan
    Member

    Hi Peter,

    Thanks for writing in!

    You can use following CSS code to target and reduce the sizes of all the headlines on smaller screens:

    @media only screen and (max-width: 767px) {
  h1, .h1 {
    font-size: 320%;
  }

  h2, .h2 {
    font-size: 220%;
  }

  h3, .h3 {
    font-size: 200%;
  }

  h4, .h4 {
    font-size: 150%;
  }

  h5, .h5 {
    font-size: 110%;
  }

  h6, .h6 {
    font-size: 100%;
  }
}

    You can change the sizes as per your preference for each headline.

    Thank you!

  • Author
    Posts