Tagged: , ,

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • April 6, 2015 at 12:03 am #423735
    imagestudios

    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;
    }
    }

    April 6, 2015 at 3:51 pm #423977
    Yigit

    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,
    Yigit

    April 10, 2015 at 6:53 pm #426705
    imagestudios

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

    April 11, 2015 at 8:01 am #426946
    Rikard

    Hi!

    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.

    Cheers!
    Rikard

    April 11, 2015 at 6:22 pm #427056
    imagestudios

    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?

    April 13, 2015 at 8:30 am #427343
    Rikard

    Hey!

    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.

    Regards,
    Rikard

    April 14, 2015 at 4:18 pm #428299
    imagestudios

    Thank you! You guys are always more than helpful.

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