CSS for Site-Title and Description not being applied to mobile site

  • happytoddlerplaytime · Member ·

    Hello, I entered in this code to change the Dicot theme site-title and description position. It looks fine on a desktop but on my iPhone it is all wonky. How do I fix it? Also can I change the color and font of the site-title and description? Thank you (I am a novice at CSS)

    .site-title {
    font-size: 55px;
    font-weight: ;
    line-height: 2;
    position: absolute;
    top: 0;
    left: 300px;
    right: 300px;
    color: green;
    }

    .site-description {
    font: 300 italic 20px “Source Sans Pro”, Helvetica, sans-serif;
    margin: 0;
    position: relative;
    line-height: 80px;
    top: 1px;
    bottom: px;
    left: 250px;
    right: 300px;
    }

    The blog I need help with is: (visible only to logged in users)

  • otpidusprime · Member ·

    Hello @happytoddlerplaytime
    There is too much left and right spacing added to the site title: 

    .site-title {
    font-size: 55px;
    font-weight: ;
    line-height: 2;
    position: absolute;
    top: 0;
    left: 300px;   /*too much left space*/
    right: 300px;   /*too much right space*/
    color: green;
}

    and that’s the reason why the site title is acting all weird on mobile devices. As mobile devices has less screen width the letters of the site title are wrapped due to the left and right spacing.

    Same goes for site description too.

    So what’s the solution?
    These CSS codes are: 

    .site-title {
    font-size: 55px;
    line-height: 2;
    position: absolute;
    top: 0;
    left: 0px;
    right: 0px;
    color: green;
}
    .site-description {
    font: 300 italic 20px "Source Sans Pro", Helvetica, sans-serif;
    margin: 0;
    position: relative;
    line-height: 80px;
    left: 250px;
    right: 0px;
}

    The above codes will resolve the wrapping issue on mobile, but there will be still some issues that are caused because of the large font-size, so to solve that we can reduce the font size only for mobile devices and do some layout adjusting, using these: 

    /*for screens below 768 pixels of width*/
@media only screen and (max-width: 768px) {
    .site-title {
        font-size: 25px;
    }

    .site-description {
        font-size: 14px;
        line-height: 15px;
        left: 100px;
    }

    .site-header {
        padding-bottom: 0;
        margin-bottom: -80px;
    }
}
    /*for screens below 420 pixels of width*/
@media only screen and (max-width: 420px) {
    .site-title {
        font-size: 5vw;
    }

    .site-description {
        font-size: 4vw;
        line-height: 4.5vw;
        left: 25%;
    }

    .site-header {
        margin-bottom: -120px;
    }
}

    Hope these help 🙂

  • otpidusprime · Member ·

    Also, you can use these CSS to change the color of the title and description text: 

    .site-title a {
    color: #0080ff !important;
}
    .site-description {
    color: #0080ff;
}

    ‘#0080ff’ is blue – you can change it to whatever color you like. 🙂

  • happytoddlerplaytime · Member ·

    Thank you!!

    This might seem like a dumb question but where can i find all the colour codes?

  • otpidusprime · Member ·

    Apologies for the delayed response.
    Don’t worry @happytoddlerplaytime, no question is ever dumb.

    Well some of them are, but probably not all of them. All question’s here on WordPress.COM forums are important to us! 😇
     

    where can i find all the colour codes?

    You can use tools like these:
    https://www.w3schools.com/colors/colors_picker.asp
    http://htmlcolorcodes.com/

    To pick your favorite color and get the color codes(in various formats) right away! Hope this helps 🙂

  • The topic ‘CSS for Site-Title and Description not being applied to mobile site’ is closed to new replies.