Home>Support>Fonts smaller in mobile devices

Fonts smaller in mobile devices

By mela, 10 years ago. Last reply by mela, 10 years ago.
Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].

We set some font in visual editor to 24pt which looks really nice on computer screens but in mobile devices looks ridiculous and cut up. Is there a way to have the font smaller for mobile devices only.

URL: http://melapc.net

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 10 years, 2 months ago Andrew Misplon
    Hi, I Work Here

    Hi mela

    In the Text tab of the Visual Editor or Visual Editor widget (which ever one you’re using) try wrapping your text in a span tag as follows:

    <span class="large-type">
<!-- Content goes here -->
</span>

    Then at Appearance > Custom CSS target that class as follows:

    /* Mobile */

@media (max-width: 680px) {

.large-type * {
font-size: 14px;
}

}

    You can adjust the 680px breakpoint where you’d like this to kick in.

    Let me know how it goes :)

  2. 10 years, 2 months ago mela

    I can’t seem to get this to work. I am using visual editor.

    In the text tab if I do as you suggest

    The text disappears from the page.

    If I do this
    This is a test of font size in mobile devices

    the text reappears but doesn’t change in mobile. I have entered the custom CSS code as you suggested

    When I add text in visual editor with font 24pt, without changing anything, this is what the text tab looks like
    This is a test

  3. 10 years, 2 months ago mela

    I guess I can’t show the code in a post, it disappears also. How do I show you code as text??

  4. 10 years, 2 months ago Andrew Misplon
    Hi, I Work Here

    Hi mela

    (Just below the comment field we indicate how to wrap code in code tags.)

    Did you insert any text into the span tags that I posted? Text should be inserted under the comment but before the closing span tag.

    Thanks

  5. 10 years, 2 months ago mela

    In visual editor I have text 24pt and the code in the text tab looks like this
    [<span style="font-size: 24pt;">this is a test</span>]

    If I do, as I think you suggest, the code looks like this and the text disappears
    [<span class="large-type">
    <!– This is a test –>
    </span>]

    If I do this, the text reappears but does not adjust in mobile devices
    [<span class="large-type" style="font-size: 24pt;">This is a test</span>]

    I entered the CSS code you suggested.
    [/* Mobile */

    @media (max-width: 680px) {

    .large-type * {
    font-size: 10px;
    }

    }]

  6. 10 years, 2 months ago Andrew Misplon
    Hi, I Work Here

    Hi mela

    Please try entering in content after the HTML comment:

    <span class="large-type">
<!-- Content goes here -->
Above is a comment, that won't render. This line is content that will render.
</span>
  7. 10 years, 2 months ago mela

    Hi Andrew,

    Thanks for your patience, as you can tell I'm new at this.

    So that worked, the text is back…but when I adjust the font to 24pt
    (which is what I want on devises other than mobile) the code looks like this

    [<span class="large-type" style="font-size: 24pt;">This is a test for adjusting font size in mobile only.</span>]

    In the custom CSS I have this

    /* Mobile */

    @media (max-width: 680px) {

    .large-type * {
    font-size: 14px;
    }

    }

    The mobile font size is *not* changing to 14px

    :(

  8. 10 years, 2 months ago Magus
    Hi, I Work Here

    Hi Mela

    I hope you do not mind me jumping in here.

    Please try changing the custom CSS you have entered to this

    /* Mobile */

@media (max-width: 680px) {
.large-type * {
font-size: 14px !important;
}
}

    Let us know how you get on

    Magus

  9. 10 years, 2 months ago mela

    Thank you Magus

    Unfortunately that didnt work :(

  10. 10 years, 2 months ago Magus
    Hi, I Work Here

    Hi Mela

    I have just looked at your site and it does not seem to be processing any of the custom CSS you have entered. If you navigate to Appearance do you have two entries for Custom CSS. If so please make a copy of all the custom CSS you have entered and then disable the custom CSS plugin you have installed. Then return to Appearance->Custom CSS and enter the previous Custom CSS.

    Let me know how you get on

    Magus

  11. 10 years, 1 month ago mela

    Hi Magus

    I only have one Custom CSS and it has other items in it which are working,
    just not this recent set for the mobile font size.

  12. 10 years, 1 month ago Magus
    Hi, I Work Here

    Hi Mela

    It seems this method does not work on plain text. Please remove the class statement from the span tag, then open the attributes section to the right of the Visual Editor.

    In the Widgets Class box please enter ‘large-type’ without the quotes.

    This should make it work. You may want to adjust the final font size in your Custom CSS to meet your requirements.

    Let us know if this works

    Magus

  13. 10 years, 1 month ago mela

    Success!!! Thank You!!

    If i wanted different mobile font sizes on different pages can I change the name 'large-font' to another name and put in a new Costum CSS code with the new name?

  14. 10 years, 1 month ago Magus
    Hi, I Work Here

    Hi Mela

    that is exactly right. You can also use the same method to control the styling on any widget that works with PageBuilder.

    Magus

  15. 10 years, 1 month ago mela

    Great! Thanks for all your help Andrew and Magus!

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More