Font size and colour

  • Resolved gdaytaiwan

    (@gdaytaiwan)


    7 years, 2 months ago

    Hello

    Awhile ago I asked to change the default font size so that it’ll look bigger on smaller screens and this worked, but then I noticed that for larger screens, it has made the font size smaller than I would like.

    This was the code I used and I’ve tried playing around with different values in the second part of the code, but it didn’t have an effect:

    /* Set default font size in posts and page content */
.entry-content {
   font-size: 1.1em;
}

/* Reduce font size a bit on larger screens only */
@media screen and ( min-width 800px ) {
  .entry-content {
    font-size: 0.93em;
  }
}

    Could someone help me with this without affecting the default font size?

    Also I would like to change the colour of main blog post content fonts to a darker shade of grey (though not completely black). I would like the menu, meta info, headers, tags, category cloud and side bar fonts to remain as is.

    Thank you!

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • sacredpath

    (@sacredpath)

    Automattic Happiness Engineer

    Hi, for the color on the post/page content, the default color is #333. You can go full black with this, but you can adjust the color as desired.

    .entry-content {
  color: #000;
}

    Looking at the code you have above, the 1.1em would be the default size, and then on screens wider than 800px, it would be 0.93em (smaller). If you wish the font to be larger on desktop, just adjust the font size as desired in the Media Query (second CSS rule above). In the original theme CSS, the break on font size change is 50em, so you may wish to change the 800px to 50em on the min-width and see how that works.

    Thread Starter gdaytaiwan

    (@gdaytaiwan)

    Hi @sacredpath

    Thanks for the colour CSS. I’ve changed it and it looks a little darker(i think!)

    However for the sizing, I changed the values in the second CSS rule as you mentioned but it didn’t do anything.

    sacredpath

    (@sacredpath)

    Automattic Happiness Engineer

    When I look, I’m not able to find that CSS anywhere with my web inspector, which led me to look at your CSS for any errors. You have a space between the parentheses and the min width stuff. You don’t want those spaces. Also, after min-width, there needs to be a colon before the 50em.

    So, this

    /* Reduce font size a bit on larger screens only */
@media screen and (min-width: 50em) {
  .entry-content {
    font-size: 0.95em;
  }
}

    Ignore the paragraph below.

    I’ve used 1.93em in the above so that you can see the change more readily. Also note the !important. With the web inspector I had to use that to force the font size change, but in your custom CSS, you should not need that.

    • This reply was modified 7 years, 2 months ago by sacredpath.
    Thread Starter gdaytaiwan

    (@gdaytaiwan)

    Thank you, it works!

    sacredpath

    (@sacredpath)

    Automattic Happiness Engineer

    Hooray and you are welcome!

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