This topic contains 9 replies, has 5 voices, and was last updated by  Piotr (Tech Support) 1 day, 17 hours ago.

Text on Welcome screen "Title Line 1" is not scaling on mobile devices

  • Hi Hans,

    the “Title Line 1 , 1st line of the title” in the welcome screen is not scaling on mobile devices (the text is too big!). Addtionally words are splitted between the lines where should not be.

    I will send you a screenshot in a separate email

    Thanks
    Lech

    I replied to your email.

    Hello, I have the same problem , there is a solution?

    Hello @eletfds

    You can teak the size of the Welcome sections titles in the style.css file on line 1736 (towards the bottom).

    See here https://www.dropbox.com/s/42x1502rkp6nkhz/mobile-font-size.PNG?dl=0

    Here I the section, I was playing with the setting, but still does not work. What I am doing wrong?

    @media (max-width: 767px) {
    .hero h1 {
            font-size: 0.75rem !important;
            line-height: 15px !important;
        }
    .hero h2 {
            font-size: 0.75rem !important;
            line-height: 10px !important;
        }

    h2.bigtitle,
    h2.bigtitle_dark {
    font-size: 3.486rem !important;
    }
    h2.smalltitle,
    h2.smalltitle_dark {
    font-size: 1.871rem !important;
    }
    .site-title {
    max-width: 75%;
    }
    .navbar-brand {
    padding-left: 15px;
    }
    .navbar-default {
    height: auto;
    min-height: 56px;
    }
    .navbar-default .navbar-nav {
    padding-top: 0;
    }
    .navbar-default .navbar-nav > li {
    margin-left: 0;
    }
    .navbar-default .navbar-nav .active a,
    .navbar-default .navbar-nav li.current-menu-parent a,
    .navbar-default .navbar-nav li.current_page_parent a {
    border-bottom: none;
    }
    .navbar-default .navbar-nav > li > a {
    padding: 0 15px 0 15px;
    line-height: 32px;
    border-bottom: 0;
    }
    .navbar-default .navbar-nav li.menu-item-has-children a {
    margin-bottom: 0;
    }
    .navbar-default li a:hover,
    .navbar-default .navbar-nav > li > a:hover {
    border-bottom: 0;
    }
    .navbar-default .navbar-nav {
    padding-top: 0 !important;
    }
    .h1,
    .h2,
    .h3,
    h1,
    h2,
    h3,
    h4 {
    word-wrap: break-word;
    }
    .hero,
    .testimonials,
    .calltoaction,
    .newsletter {
    background-attachment: scroll !important;
    background-size: cover !important;
    background-position: center top !important;
    }
    .hero .text-left,
    .hero .text-right {
    float: none;
    text-align: center;
    margin-bottom: 10px;
    }
    .calltoaction,
    .newsletter,
    .testimonials {
    padding-top: 50px;
    padding-bottom: 50px;
    }
    .tweets .fa {
    padding-bottom: 20px;
    }
    .calltoaction .text-left,
    .calltoaction .text-right {
    float: none;
    text-align: center;
    margin-bottom: 10px;
    }
    .calltoaction2 p {
    margin-bottom: 25px;
    }
    .calltoaction2 .cta-button,
    .calltoaction2,
    .tweets,
    .tweets .tweets-list-container {
    text-align: center !important;
    }
    .clients img,
    .brands img,
    .stats .row > div {
    padding: 20px;
    }
    .pt {
    margin-bottom: 20px;
    margin-right: 0px;
    }
    .content {
    padding: 20px 0 0px 0;
    }
    .sidebar {
    margin: 0px 0 20px 0;
    padding-left: 0;
    border-left: none;
    }
    .contact form {
    margin-top: 30px;
    }
    }
    @media (max-width: 480px) {
    .hero h1 {
            font-size: .75rem !important;
            line-height: 15px !important;
        }
    .hero h2 {
            font-size: 0.75rem !important;
            line-height: 10px !important;
        }
    h2.bigtitle,
    h2.bigtitle_dark {
    font-size: 2.286rem !important;
    }
    h2.smalltitle,
    h2.smalltitle_dark {
    font-size: 1.471rem !important;
    }
    .testimonials blockquote {
    padding: 10px 20px;
    position: relative;
    border: 0;
    }
    .testimonials blockquote:after {
    content: none;
    }
    .testimonials blockquote:before {
    content: none;
    }
    }

    Hello Lech,

    I fixed the issue or you. Please check your email.

    Hi Hans,

    I am having the same issue. My site is http://www.sixstringfingerpiking.com but when I look at the home page on my iPhone the ‘g’ in Fingerpicking slips onto the next line. I have looked at the same lines in the code as lech and it made no difference.

    What was the fix for this issue please?

    Many thanks,
    Chris

    Hello Chris,

    You may want to add the CSS below to your Custom CSS section:

    //Font size for screens smaller than 480px
    @media (max-width: 480px) {
    .hero h1 {
    fint-size: 3.429rem !important
    }
    .hero h2 {
    font-size: 2rem !important;
    }
    }

    //Font size for screens between 481px and 767px
    @media (min-width: 481px) and (max-width: 767px) {
    .hero h1 {
    font-size: 3.929rem !important;
    }
    .hero h2 {
    font-size: 2.5rem !important;
    }
    }

    You can manipulate these values, so the size fits your requirements.

    Cheers,
    Piotrek

    Hi Piotrek,

    Thanks again for your help. Unfortunately it gives me a few errors (e.g. Heading (h1) should not be qualified and Heading (h1) has already been defined.) and it doesn’t seem to have made a difference to the text on the phone home page.

    I’d really appreciate any further help you can give me with this issue.

    Many thanks,
    Chris

    Hello Chris,

    Where you can see these errors?
    Have you tried adding CSS code provided by me to your Custom CSS section? You may want to add it, and play with the values, so they fit your requirements.

    Let me know if you still have any problems.

    Cheers,
    Piotrek

You must be logged in to reply to this topic.