Okay
  Public Ticket #1638526
responsive text
Closed

Comments

  • kai started the conversation

    hi there,

    i noticed that h3 is responsive but the normal text and h1 is not. this results on small screens in very small headlines (smaller than the text) and looks terrible. h1 on the other hand is far too big on small screens. i tried the headline element for that and a normal text element with a h1 text in it.

    any advice how to improve this?

    thanks a lot, kai

  •  2,682
    Andrew replied

    Hi Kai,

    Apologies for the late reply.

    Could we get a link to this bits of text because you might need to change their size with some custom CSS.

    Thanks.

  • kai replied

    hi andrew,

    thanks for your reply. what i wrote about counts for the whole site: ogitix.de

    just go to the first page and narrow the browser window to smartphone size. then you see that the headline shrinks but the "normal" text does not. 

    or on that page the blue headlines look just terrible on small screen sizes: https://www.ogitix.de/blog/
    line height not responsive.

    do you have a description how the font sizes in your theme are handled/managed?

    is what i experience not the themes normal behaviour? 

    any help about the correct font settings (headlines and "normal" text) for good responsive behaviour would be appreciated! thanks a lot, kai

  •  2,682
    Andrew replied

    Hi Kai,

    1) You can use this CSS to adjust that text:

    @media only screen and (max-width: 690px){
    .row .col p{
    font-size:15px;
    line-height:20px;
    }
    }
    

    add it to salient \ general settings - css script related - custom css code. Adjust it to what you want.

    2) On this page https://www.ogitix.de/blog/ you can use the following CSS to adjust the look of the title which is a h2 and the excerpt text:

    @media only screen and (max-width: 690px){
    .container article.post .post-header h2 {
        line-height:normal;
    }
    article.post .excerpt p{
        font-size:15px;
        line-height:normal;
    }
    }
    

    add it to the same area -  salient \ general settings - css script related - custom css code.

    This is not an a bug. The font are controlled in salient \ typography area.

    Hope this clears things up.

  • kai replied

    hi andrew,

    thanks for your help and css!

    i really wanted to know if you have a guide how fonts are supposed to work (responsively) in salient. this is important for me to understand and work with the theme. 

    this custom css can't be your standard solution? the theme should act more responsive by default. no?

    thanks again, kai

  •  2,682
    Andrew replied

    Hey there,

    Thanks for reaching in,

    Try using the New Responsive Typography Settings in here : http://prntscr.com/gnf951 .

    Regards.

  • kai replied

    thanks andrew!

    that looks good. 

    but 2 questions:

    will the line height for the headlines be adjusted, too?

    where can i set the same responsive options for body font?

    thanks again! kai

  •  2,682
    Andrew replied

    Hey Kai,

    For question one. 

    If the line height does not respond.You can add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you can't see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):

    @media only screen and (max-width: 690px) {
        #page-header-bg .span_6 h1, .single.single-post .section-title h1 {
            line-height: 59px!important;
        }
    }
    #page-header-bg[data-post-hs="default_minimal"] #single-below-header {
        display: none !important;
    }

    Let me know if it works.

    Kind Regards