This topic contains 13 replies, has 5 voices, and was last updated by  Hans (Support Admin) 2 months, 2 weeks 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

    Hi Piotrek,

    Thanks for your reply.

    I went to ‘integral options’ then ‘custom code’ and then pasted the code you wrote into the ‘custom css’ section. The warning triangle (a triangle with a ! in it) comes up in the side bar to the left of the lines of code.

    I tried changing all the values down to 0.1 to see what happened but it doesn’t seem to have made a difference. When I look at my website on my iPhone the ‘g’ from ‘fingerpicking’ is still on a different line to the rest of the word.

    Best wishes,
    Chris

    Hi @cmurrin

    Try this in the Custom Code field and let me know if it works.

    @media (max-width: 768px) {
    .hero h1 {font-size: 3rem !important;}
    }

    Hi Hans,

    That worked perfectly, thank you very much for your help. Really love the theme.

    Best wishes,
    Chris

    Hi @cmurrin

    Happy to know it worked.

    Glad to hear you like the theme :)

You must be logged in to reply to this topic.