Navigation
Archive / 1031 / H1 font size
This is archived content. Visit our new forum.

Tagged: 

  • Author
    Posts
  • July 3, 2016 at 9:29 am #1070380
    bak
    Participant

    Hi

    I want to reduce font size of H1 to 54px on desktop. For this I have inline CSS font-size: 54px.

    At the same time I want to reduce the font size for mobile further as it does not fit on the screen since the words are long.

    In custom CSS, I used
    @media (max-width: 480px)
    h1, .h1 {
    font-size: 10px;
    }

    but it did not work.

    What is the correct way to address this?

    July 3, 2016 at 9:29 am #1070381
    bak
    Participant
    This reply has been marked as private.
    July 3, 2016 at 10:24 am #1070414
    Rupok
    Member

    Hi there,

    Thanks for writing in! As you are using inline CSS instead of Custom CSS, you need to use !important tag to override this. Let’s update your code to following :

    @media (max-width: 480px)
h1, .h1 {
font-size: 10px!important;
}

    Hope this helps.

    July 3, 2016 at 10:39 am #1070424
    bak
    Participant

    Ok thank you, that’s good to know.

    For some reason it does not apply

    July 3, 2016 at 10:50 am #1070441
    Christian
    Moderator

    Sorry for the syntax error. It should be

    @media (max-width: 480px) {
h1, .h1 {
font-size: 10px!important;
}
}

    Thanks.

    July 3, 2016 at 11:11 am #1070451
    bak
    Participant

    it still does not apply. not sure why

    July 3, 2016 at 11:48 am #1070491
    Rupok
    Member

    Hi there,

    Would you clarify where you are trying to use this? I can’t find any h1 tag with 54px font size. Also not that it will be applied for all h1 on your site.

    I have copied your last CSS and there was syntax error (I didn’t notice). So there is a possibility of having more syntax error that might prevent the other codes to be generated properly. So let’s check your other code as well.

    Cheers!

  • Author
    Posts
  • <script> jQuery(function($){ $("#no-reply-1070380 .bbp-template-notice, .bbp-no-topic .bbp-template-notice").removeClass('bbp-template-notice'); }); </script>