Site-Title does not work on a tablet-screen

Iska January 17, 2018 at 2:48 pm

Hi, the responsive part of the site-title of my website works well for smaler screens but on screens between 767 und 1024 px (landscape) there is an automatic word wraping in the title. Is there possibility to change this?
Thanks for helping.

Replies (7)

  1. Iska January 17, 2018 at 2:48 pm

    Hi, the responsive part of the site-title of my website works well for smaler screens but on screens between 767 und 1024 px (landscape) there is an automatic word wraping in the title. Is there possibility to change this?
    Thanks for helping.

  2. Yogendra January 17, 2018 at 3:10 pm

    Hi Iska,

    Please post your website URL. please also attach screenshots of the issue
    if possible

    Regards

  3. Iska January 18, 2018 at 12:10 pm

    Hi Yogendra,
    the URL is http://chinesische-medizin-pasing.de. I didn’t find a way to attach screenshots, but you can see the issue if you reduce the size of the browser window. The page-title on the left side of the landing page changes from “Gabriele Fischer-Humbert to Gabriele Fischer- (here comes a line break) Humbert. If you reduce the browser-window further everything looks fine again.

    Kind regards

  4. Yogendra January 18, 2018 at 2:35 pm

    Hi Iska,

    Use the CSS below

    h1.site-title {
    line-height: 15px;
    }

    Paste this CSS in Appearance -> Customize -> Additional CSS

    Although a line break would still appear because of the space limit, as the whole layout is of 12 columns grid in which only 3 columns are for the logo area
    and the rest 9 columns are for the menu

    Regards

  5. Iska January 19, 2018 at 11:04 am

    Hi Yogendra, that is a good Idea, it looks a lot better. Thank you!

    Is there any possibility too change the px-sizes in the media-query? Would i find it in the bootstrap css?

    Kind regards, Iska

  6. Yogendra January 19, 2018 at 11:49 am

    Hi Iska

    Yes, I am writing down few more CSS code to help you

    h1.site-title a {
    display: block;
    font-size: 22px !important;
    font-weight: 700;
    line-height: 20px !important;
    }

    p.site-description {
    margin: 0;
    margin-top: 2px;
    }

    Adjust according to what fits you best, The first one in bold is for the Title and the second one for the description below title

    Best Regards

  7. Iska January 22, 2018 at 10:23 am

    Hi Yogendra, thanks a lot for the help. Best regards

  8. Yogendra January 22, 2018 at 1:51 pm

    You are welcome 🙂

Post a Reply

Reply To: Site-Title does not work on a tablet-screen
Your information: