How can I increase font size in 2012 theme

brunoschull · Member · Jun 20, 2014 at 8:35 pm
Copy link

Add topic to favorites
Hi. I am using the 2012 theme with the 30 $ custom upgrade. I want to increase the size of the font in the following places: 1) the title, 2) the sub-title, 3) the menu tabs, and 4) the font in the widget titles. Does anybody have an idea how to do this with the CSS editor? I would need simple beginner cut-and paste instructions. Thanks! Bruno

The blog I need help with is: (visible only to logged in users)
designsimply · Member · Jun 23, 2014 at 2:36 pm
Copy link
Here is some CSS to get you started with that—add it to your Appearance > Customize > CSS editor:
```
#page .site-header h1 {
	font-size: 60px;
}
#page .site-description {
	font-size: 25px;
}
#page .main-navigation li {
	font-size: 20px;
}
#page #secondary .widget-title {
	font-size: 20px;
}
```
Adjust the px values as needed. Make sure to go to Appearance > Customize and click the tablet and mobile buttons at the bottom to see how the CSS updates look in different screen sizes too. It’s possible to make different font adjustments for different screen sizes if needed. If you get to a point where you can’t adjust the font sizes with one edit and need help with something more detailed for small screen sizes, let me know.

Your book looks really cool!! I’m glad to see that you chose WordPress.com for your blog. :)
brunoschull · Member · Jun 23, 2014 at 7:46 pm
Copy link
To Designsimply: Thanks! That worked really well. Of course, now that I can adjust all the font sizes, it becomes an endless game of balancing the appearance….

One last question:

Can I add another similar line of code to make the text bigger in the “secondary” widget places, for example, the names and dates of posts in the archives, the instructions, “Click to follow blog…” and so on?

Now that the other text is bigger, this looks disproportionately small.

Again, thanks so much. I had no idea it was so easy, and I am amazed at the depth of knowledge people have…I am basically a computer beginner.

All the best,

Bruno
designsimply · Member · Jun 23, 2014 at 8:28 pm
Copy link
Can I add another similar line of code to make the text bigger in the “secondary” widget places, for example, the names and dates of posts in the archives, the instructions, “Click to follow blog…” and so on?

Yes. Something like this might work:
```
.widget-area .widget p,
.widget-area .widget li,
.widget-area .widget .textwidget {
	font-size: 14px;
}
```
Again, thanks so much. I had no idea it was so easy, and I am amazed at the depth of knowledge people have…I am basically a computer beginner.

No problem! CSS is pretty fun stuff in my opinion, but I’m kind of weird like that. :)
brunoschull · Member · Jun 24, 2014 at 5:53 am
Copy link
Hi Designsimply. Your code worked again, perfectly. Thanks again! I have one last question (see below).

But first, I checked out your blog and browsed some of the pictures.

My favorite?

The blue bicycle.
http://cute.wordpress.com/2014/06/05/blue-bicycle

I have lived with many bicycles in my life, and I have a soft spot for blue bicycles. Great pictures. Peugeot bicycles (French) also have lots of history. I guess you could say that bicycles are one of the areas that I know well, like you know CSS code.

Here’s my last question:

The only text remaining that I would like to make a little bigger is the “Leave a reply” text at the top of each post.

In fact, I would really like to configure the comments/discussion parts a little differently, but for now making the “Leave a reply text a little bigger” would be a great help.

Ideas?

And keep up the versatile cute posts!

Bruno
designsimply · Member · Jun 24, 2014 at 2:17 pm
Copy link
My favorite?
The blue bicycle.

Thanks! It’s a particularly cute bicycle that belongs to a friend of mine. :)

The only text remaining that I would like to make a little bigger is the “Leave a reply” text at the top of each post.

To make the comment text bigger, add this to your Appearance > Customize > CSS editor:
```
.comments-link a {
	font-size: 18px;
}
```

No items found.