Font Size

  • In changing the typeface of my site (and wanting the text to be bigger), I amended the following CSS for Tracks:

    body {
  height: 100%;
  font-size: 120%;
  margin: 0;
  padding: 0;
  font-family: "myriadpro_regular", sans-serif;
  line-height: 1.5em;
  color: #4d4d4d;
  background: #222;
  -webkit-font-smoothing: antialiased;
  word-wrap: break-word;
  -ms-word-wrap: break-word;
}
h1, h2, h3, h4, h5, h6 {
  font-family: "myriadpro_semibold", sans-serif;
  margin: 0;
  padding: 0;
  font-weight: 700;
}

    Now, the mobile menu has horizontal lines in it, as seen in this link. The culprit appears to be as a result of the font-size: 120%; style.

    Is there a better way to target the overall font size of the theme?

    Thanks and regards,
    Todd

Viewing 5 replies - 1 through 5 (of 5 total)
  • Theme Author Ben Sibley

    (@bensibley)

    Yea the font-size percentage value on the body element has some greater implications for the design.

    Instead, I would recommend setting a pixel value on the overflow-container element like this:

    .overflow-container {
  font-size: 18px;
}

    That should have the desired effect of increasing the font sizes everywhere on the site.

    Thread Starter netniks

    (@netniks)

    Hi Ben,
    Thanks for the CSS! I don’t think that I would have been able to isolate the style you indicated on my own.

    I added this to my Custom CSS to disable the mobile menu animation, plus, added a white background color to eliminate the horizontal lines:

    #menu-primary,
#menu-primary-tracks {
  transition: none;
  background-color: white;
}

    Is there an easy way to remove the tagline in the mobile view, as it is too close to the condensed menu icon, as seen here.

    Thanks and regards,
    Todd

    Theme Author Ben Sibley

    (@bensibley)

    Yea try out this CSS:

    @media all and (min-width: 50em) {

  .site-description {
    display: none;
  }
}

    That will tell the browser not to display the tagline whenever the screen is 50ems (800px) or less wide.

    Thread Starter netniks

    (@netniks)

    Hi Ben,
    FWIW, my site description would be off in mobile view, but toggle on when I clicked on the hamburger button.

    Does it make sense that this CSS doesn’t remove the site description, but rather, bumps it down and out of the way of the hamburger menu?

    .site-header.toggled .site-description {
  padding-top: 40px;
}
    Theme Author Ben Sibley

    (@bensibley)

    Woops must have been short on coffee when I wrote that one ??

    The CSS for removing the tagline from mobile widths should use max-width:

    @media all and (max-width: 50em) {

  .site-description {
    display: none;
  }
}

    Normally, the tagline and primary menu should automatically get pushed down to create enough space, so there may be some conflict with a customization already made to the site. We can get around this by explicitly adding space with a snippet very similar to the one you’ve shared:

    .site-header.toggled .menu-primary {
  padding-top: 40px;
}

    The one modification I’ve made is to add the padding to the top of the menu container instead, so the logo won’t overlap the menu items if the tagline is removed.

    This will only add additional space when the mobile menu is open. The “40px” value can be increased if necessary.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Font Size’ is closed to new replies.