Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
  • #423735

    Is there a way to get headings (H1 and H2 specifically) to be responsive on smartphones? Right now, it bleeds off the side of the phone and is cut off when the word is too long. In this case, the word is “Communicate.” Following advice provided on another post, I tried copying the code below into the Quick CSS, but it didn’t work. Thoughts on how to remedy this? Thanks so much!

    @media only screen and (max-width: 767px) {
    /* Add your Mobile Styles here */
    #top #wrap_all .header_color h1, #top #wrap_all .main_color h1, #top #wrap_all .alternate_color h1, #top #wrap_all .footer_color h1, #top #wrap_all .socket_color h1 {
    font-size: 3em;

    #top #wrap_all .header_color h2, #top #wrap_all .main_color h2, #top #wrap_all .alternate_color h2, #top #wrap_all .footer_color h2, #top #wrap_all .socket_color h2 {
    font-size: 2em;


    Hi imagestudios!

    Please try changing your code to following one

    @media only screen and (max-width: 767px) {
    h1 { font-size: 3em !important; }
    h2 { font-size: 2em !important; }}

    Best regards,


    Still have one longer word “Communications” that is getting cut off on the right on a smartphone. Thoughts?



    I think the only solution for that is to decrease the font size, or add a media query just before it breaks and decrease the font size in that query only. Please let us know if you need any help in doing so.



    Hi Rikard,

    Thanks for your response. Could you tell me what a media query is? Are you saying have an invisible image and just assign a font size to that image line of code?



    A media query is a special circumstance in CSS, like this: @media only screen and (max-width: 767px), that line is saying – do this only for screens 767px wide and smaller, so in your case, please try this:

    @media only screen and (max-width: 767px) {
    h1 { font-size: 36px !important; }
    h2 { font-size: 24px !important; }

    Play around with the values 36 and 24 until you find a font size that you are happy with.



    Thank you! You guys are always more than helpful.

Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘Getting Headings to be Responsive’ is closed to new replies.