WordPress.org

Ready to get started?Download WordPress

Forums

Twenty Twelve
[resolved] How to change default fonts for mobile, ie, less than 600px? (9 posts)

  1. Sam Lowry
    Member
    Posted 1 year ago #

    I figured out how to change fonts for pretty much everything except when the browser window is less than 600px. Then, everything defaults to Helvetica. I saw nothing in the CSS which would force this to happen.

    Sorry, my site is local-only so far. Using a child theme of twentytwelve.

    Thanks for any tips....

    SL

  2. Andrew
    Forum Moderator
    Posted 1 year ago #

  3. Sam Lowry
    Member
    Posted 1 year ago #

    Hi Andrew,
    Yes, I knew about Media Queries, and normally that seems to do it, but I've tried every possible CSS and couldn't find one that would override the CSS for max-width: 599px.

    If anyone has successfully done this, I'd love to take a peek.
    Thanks,
    SL

  4. Andrew
    Forum Moderator
    Posted 1 year ago #

    Can you post a link to your webpage with the media queries that doesn't work?

  5. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    @Sam - are you aware that twentytwelve is coded "mobile-first" so the "regular" (non media query) styles apply to <600 width -- the Helvetica is set in the body tag:

    body {
    	font-size: 14px;
    	font-size: 1rem;
    	font-family: Helvetica, Arial, sans-serif;
    	text-rendering: optimizeLegibility;
    	color: #444;
    }
  6. Sam Lowry
    Member
    Posted 1 year ago #

    @Wpyogi - I did see that body CSS, but changing the font had no effect for fonts <600. No matter what it showed up as Helvetica. I can change the body.custom-font-enabled - which will change the font for >600 without issue.

    Here's the site I'm working on- far from complete, but you can see the issue: http://laughingalfloral.com/site2012/featured/ I removed all extra media queries as none of them worked.
    Thanks again,
    SL

  7. Andrew
    Forum Moderator
    Posted 1 year ago #

    First close this section of your media queries off;

    /* Minimum width of 600 pixels. */
    @media screen and (min-width: 600px) {
  8. Sam Lowry
    Member
    Posted 1 year ago #

    Well don't I feel dumb. Damn brackets! Must have misplaced it from the very beginning.

    Thanks Andrew. Considered it solved.

  9. Andrew
    Forum Moderator
    Posted 1 year ago #

    lol that's okay :)

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic