Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • January 30, 2018 at 8:48 pm #905113
    tkingsbu

    still having problems…

    I think I pretty much have the font weight problem solved…
    but the main issue now is responsiveness…

    I’ve added css to ‘quick css’, as well as the ‘built-in css editor’

    html { font-size: 100%; }
    body { line-height: 1.6875; font-family: ‘Lato’, arial, helvetica, sans-serif; }
    h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: ‘lato’, arial, helvetica, sans-serif; font-weight: 900; margin-top: 0; line-height: 1.1; }
    h1 { font-size: 200%; }
    h2 { font-size: 180%; }
    h3 { font-size: 160%; }
    h4 { font-size: 120%; }
    h5 { font-size: 100%; }
    h6 { font-size: 80%; }
    p { color: #000000; font-size: 100%; font-weight: 500; margin-bottom: 5%; }

    @media (min-width: 768px) {
    body { font-size: 80%; }

    }

    @media (min-width: 992px) {
    body { font-size: 100%; }

    }

    @media (min-width: 1200px) {
    body { font-size: 120%; }

    }

    essentially, I’m trying to emulate https://gusto.com/ how they do their fonts… but with Lato as the font family…
    I’m not having a whole lot of success at this point…
    we’re having some serious issues with the responsive text… it’s massive…and the line spacing is wack….

    help me, obi-wan…you’re our only hope!

    • This topic was modified 6 years, 10 months ago by tkingsbu.
    January 31, 2018 at 10:55 pm #905866
    tkingsbu

    kinda losing my mind here…
    could really use some help…

    February 1, 2018 at 7:17 am #906000
    Rikard

    Hi,

    Thanks for the links, though the responsiveness looks ok on my end. Could you specify which element and on which screen size you are having problems with please?

    Best regards,
    Rikard

    February 1, 2018 at 8:33 am #906033
    Guenni007

    All font-sizes inherited the size from body. Maybe you can manage your desired result by using a screen-width dependent value
    f.e.
    body {font-size: 1.5vw}
    but from that there will be more problems to come from than to solve one.
    i think this is the clue – that on responsive design the containers width and their positioning is changed – and font-size stayes more readable

    • This reply was modified 6 years, 10 months ago by Guenni007.
    February 1, 2018 at 3:05 pm #906314
    Rikard

    Hi,

    Thanks for the input @guenni007, I personally still like to use pixel values for each screen size. I just makes more sense in my head knowing exactly which size they are :-)

    Best regards,
    Rikard

    February 1, 2018 at 4:31 pm #906372
    Guenni007

    yes: more legibility

    i think this is the clue – that on responsive design the containers width and their positioning is changed – and font-size stayes more readable

    February 1, 2018 at 8:50 pm #906450
    tkingsbu

    so….
    first of all, thanks so much everyone for chiming in :) it’s very very much appreciated :)

    we solved the issue :)

    we added

    h1 {
    font-family: Lato !important;
    font-size: 57px !important;
    font-variant: normal;
    font-weight: 900 !important;
    line-height: 63px;
    }
    @media(max-width:480px){
    h1{
    font-size: 29px!important;
    line-height: 32px ;
    }
    }
    h2 {
    font-family: Lato !important;
    font-size: 46px !important;
    font-variant: normal;
    font-weight: 900!important;
    line-height: 48px;
    }
    @media(max-width:480px){
    h2{
    font-size: 23px!important;
    line-height: 24px ;
    }
    }
    h3 {
    font-family: Lato !important;
    font-size: 37px !important;
    font-variant: normal;
    font-weight: 900!important;
    line-height: 44px;
    }
    @media(max-width:480px){
    h3{
    font-size: 19px!important;
    line-height: 22px ;
    }
    }
    h4 {
    font-family: Lato !important;
    font-size: 23px !important;
    font-variant: normal;
    font-weight: 700!important;
    line-height: 32px;
    }
    @media(max-width:480px){
    h4{
    font-size: 17px!important;
    line-height: 23px ;
    }
    }
    h5 {
    font-family: Lato !important;
    font-size: 15px !important;
    font-variant: normal;
    font-weight: 700!important;
    line-height: 20px;
    }
    @media(max-width:480px){
    h5{
    font-size: 15px!important;
    line-height: 20px ;
    }
    }
    p {
    font-family: Lato;
    font-size: 17px;
    font-style: normal;
    font-variant: normal;
    font-weight: 400!important;
    line-height: 25px;
    }
    blockquote {
    font-family: Lato;
    font-size: 21px;
    font-style: normal;
    font-variant: normal;
    font-weight: 400!important;
    line-height: 30px;
    }
    pre {
    font-family: Lato;
    font-size: 13px;
    font-style: normal;
    font-variant: normal;
    font-weight: 400!important;
    line-height: 18.5667px;

    }

    as well as adding in the call for all the font weights for lato in the header…

    and that, as they say, was that :)

    now everything finally works exactly how i wanted it :)

    February 2, 2018 at 6:07 am #906629
    Rikard

    Hi,

    Great, glad you got it working and thanks for sharing your solution :-)

    Please let us know if you should need any further help on the topic or if we can close it.

    Best regards,
    Rikard

    February 2, 2018 at 4:25 pm #906893
    tkingsbu

    we can close this one, thanks so much to everyone for chiming in with help!

    cheers
    tyson

    February 2, 2018 at 11:56 pm #907120
    Basilis

    Hi,

    Glad we could help!
    Please take a moment to review our theme and show your support https://themeforest.net/downloads
    To know more about enfold features please check – http://kriesi.at/documentation/enfold/
    Thank you for using Enfold :)

    Best regards,
    Basilis

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘responsive font problems…’ is closed to new replies.