Support » Theme: Customizr » Tagline font change on smaller screen

  • Resolved AMI79



    I modified the font of the tagline using this code:

    \.navbar-wrapper .navbar h2 {
    font-family: Segoe Script;

    But when the size of the window decreases, or on mobile devices, the font is back to the default one.

    Does anybody know how to fix this?


Viewing 8 replies - 1 through 8 (of 8 total)
  • Thanks for the explanations and the snippet.

    It still doesn’t work for me though.

    This how my css looks like (I made these changes for all the media types listed in the snippet):

    //* ============================================== */
    /* Smaller devices */
    /* Android Portrait 240×320 */
    /* ============================================== */
    @media all and (max-width:240px) {
    .navbar-wrapper .navbar h2 {
    font-family: Segoe Script;


    Did I do something wrong?
    When you say “after the base css”, what does that mean exactly?


    The CSS is processed in chronological order so having a setting at Line 1 will be overridden (generally) by a change to that same property in Line 10.

    So my point was to add the @media statements after the ‘normal’ code in your CustomCSS panel or child theme style.css.

    Can we have a link to your site to see what is wrong?

    (When posting, I can see you’ve tried to use / for your code. If you look in the panel where you write the post, there are some buttons at the top, including [code].
    When you press it once it adds a backtick and the button changes to [/code]. Then enter your code. Press it again at the end of the code for the 2nd backtick. This is how you get the code shading in posts)

    Ah ok, I did indeed put the @media statements after my other style.css changes.

    Sorry I forgot to give you the link to the website:

    thanks for the tip 😉

    [Moderator Note: Please ensure that you are embedding links correctly in your posts.]

    Viewport Resizer is a great tool for checking Viewports. You add a booklet to your bookmarks. You’ll see that your site stops being responsive by width: 768px (eg a Tablet).

    But as this font-family is the only item you’re trying to control, then you don’t need any of the @media statements. Remove them all.

    You need to replace your body{} code (Line 54) with:

    body {
      background: none repeat scroll 0 0 #FFFFFF;
      font-family: Segoe Script;

    Sorry, that will change throughout the site.

    What it should be is: {
      font-family: Segoe Script;

    Thank you! The font remains the same when the width decreases!

    I’ll keep the @media statements though because only the default fonts display on ipad tablets.

    I’ll install Viewport Resizer too.

    Thanks very much for your help & explanations 🙂


Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Tagline font change on smaller screen’ is closed to new replies.