WordPress.org

Forums

Customizr
[resolved] Tagline font change on smaller screen (9 posts)

  1. AMI79
    Member
    Posted 1 year ago #

    Hello,

    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?

    Thanks!

  2. rdellconsulting
    Member
    Posted 1 year ago #

  3. AMI79
    Member
    Posted 1 year ago #

    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 240x320 */
    /* ============================================== */
    @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?

    Thanks.

  4. rdellconsulting
    Member
    Posted 1 year ago #

    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)

  5. AMI79
    Member
    Posted 1 year ago #

    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: http://animal-missions-international.org

    thanks for the tip ;)

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

  6. rdellconsulting
    Member
    Posted 1 year ago #

    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;
    }
  7. rdellconsulting
    Member
    Posted 1 year ago #

    Sorry, that will change throughout the site.

    What it should be is:

    h2.site-description {
      font-family: Segoe Script;
    }
  8. AMI79
    Member
    Posted 1 year ago #

    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 :)

  9. AMI79
    Member
    Posted 1 year ago #

    resolved

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic

Tags