Reduce Homepage Text size on mobile

  • Bryan
    Bryan
    Newbie
     
    50 points

    Hi Everyone,

    How can I reduce the font size on mobile devices to be different from that of Desktop.
    Especially the font size of the “Main Banner Block” title etc.

    Thanks in advance


    JamesD
    JamesD
    Elite Member
     
    507 points

    Hello Bryan,

    Not sure how comfortable you are with CSS, but you can try to use a media query like:

    @media screen and (max-width: 480px) {
    /** CSS Goes Below */
    h1#logo_text1 {
    font-size: 10px;
    }
    /** CSS Goes Above */
    }

    This example would tell the browser that the font size of “10px” should be used for the “h1” element with the ID of “logo_text1” on viewports up to “480px”.

    Viewports larger than “480px” will go to the next default size of your styling.
    Note: CSS would need to be added for each element you need altered.

    Just set the target screen (if not using “480px”) and add your styling code between the “/** CSS Goes Below */” & “/** CSS Goes Above */”

    This would be placed in your custom stylesheet/code area.

    This is the “jist” of it, but there may need to be tweaks depending on the current styling.

    Does this make sense?
    W3 Schools may help explaining it better: CSS3 Media Queries


    Bryan
    Bryan
    Newbie
     
    50 points

    Hi James,

    Thanks for the above. I tried it but it doesn’t seem to do anything.
    All I want is to make any h1 header font size to resize to h2, while h2 is resized to h3.
    If you kindly view the site on mobile you’ll notice that the “Welcome to Klick and Mortar” font is quite big hence the reason.

    Any other way to achieve this?

    Thanks for you help.


    Josh
    Josh
    Super Guru
     
    13,836 points

    Hello Bryan,
    Like James mentioned above you can use media queries for this.Use inspect element tool to find the element you want to change.
    How to use browser inspect element tool: >>https://www.youtube.com/watch?v=dlQrFFwAC_A
    So your code should be:

    @media screen and (max-width: 480px) {
    .jumbotron h1 {
    font-size: 10px;
    }
    }
    @media screen and (max-width: 480px) {
    .jumbotron h2 {
    font-size: 5px;
    }
    }


    Bryan
    Bryan
    Newbie
     
    50 points

    Hi Josh,

    Thanks for your addition. I have added those suggested bits in my custom css/Java script section but still didn’t get any changes.

    What am I doing wrong?


    Josh
    Josh
    Super Guru
     
    13,836 points

    Hello Bryan,
    Try this

    @media screen and (max-width: 480px) {
    .jumbotron h1 {
    font-size: 10px !important;
    }
    }
    @media screen and (max-width: 480px) {
    .jumbotron h2 {
    font-size: 5px !important;
    }
    }


    Bryan
    Bryan
    Newbie
     
    50 points

    Hi Josh,

    Thanks. I have added the new code to my custom css/javascript section and removed the old one but still no luck.


    Josh
    Josh
    Super Guru
     
    13,836 points

    url please


    JamesD
    JamesD
    Elite Member
     
    507 points

    Hello Bryan,

    There could be any number of things stepping on it (causing it not to work), which is why Josh asked for a URL.

    It’s a lot easier assist when one can view the actual issue as opposed to going off an image or a written description.


    Bryan
    Bryan
    Newbie
     
    50 points

    Apologies for the late response. The URL is http://www.klickandmortar.com

    Thanks for looking into this


    Josh
    Josh
    Super Guru
     
    13,836 points

    Hello Bryan,
    Did you view the video link I provided above on how to use the Inspect Element Tool?If you did then this would have saved you loads of time.Try below code

    @media screen and (max-width: 480px) {
    .home #mainimgblock .wrapper h1 {
    font-size: 10px;
    }
    }
    @media screen and (max-width: 480px) {
    .home #mainimgblock .wrapper h2 {
    font-size: 5px;
    }
    }

    This reply was awarded the best answer by the topic poster.

    Bryan
    Bryan
    Newbie
     
    50 points

    Thanks Josh, that worked.


    Josh
    Josh
    Super Guru
     
    13,836 points

    Thanks for updating Bryan :)


Viewing 13 posts - 1 through 13 (of 13 total)

You must be logged in to reply to this topic.