Modifying CSS for minor tweaks

@bandora – Glad you’re liking Scratchpad!

I’ll answer your questions in batches, starting first with the font. I’m basing my replies off your site at hippiemom.bandorafox.com, assuming that’s the one you need help with.

– How do I change the font to a different Google Font? I tried using the CSS in the Typography area as a guide in “Additional CSS” but it didn’t work.

There are two steps to using a Google Font. First, you need to “enqueue” the font on your site so it’s available to use in your CSS.

I checked your code and I see that you’ve enqueued a font called Indie Flower.

Next, you need to target the elements whose font you want to change.

Since you’re already using a child theme, I’d suggest you put your font CSS there, instead of in the Customizer. It’ll be easier to keep track of custom CSS in only one place.

Let’s say you want to change the font of your post titles and widget titles to Indie Flower. You’d target those elements, separated by commas, with this declaration:

.entry-title, .widget .widget-title  {
  font-family: "Indie Flower", Kalam, Chalkboard, script;
}

The fonts after Indie Flower are backup fonts, in case the Indie Flower font can’t be loaded for whatever reason.

Then you can also modify their size independently, like this:

.entry-title {
  font-size: 40px;
}
.widget .widget-title {
  font-size: 30px;
}

You can use a browser inspector if you want to locate other elements and add them to your first CSS declaration.

• This reply was modified 7 years, 4 months ago by Kathryn Presner. Reason: fixed code formatting

– What code do I use to reduce the space between the header and the rest of the page (post/sidebar)?

You can remove the 40px of space below the header by adding this to your child theme’s stylesheet:

.header-image-contain {
  margin-bottom: 0;
}

Let me know if that does it.

Actually I’m a little confused – this file is missing the normal child theme information at the top:

https://hippiemom.bandorafox.com/wp-content/themes/hippiemomtheme/style.css

If you let me know what you did, I can help you sort it out if you like. ??

– How can I make the main post/page box max-width larger than 800px?

The left column is currently set to take up 67% of the full page width, which is set to 1200px. If you’d like to adjust that, you could first increase the maximum width of the wrapper:

.wrap {
  max-width: 1400px;
}

Then add the same number of pixels (1400px-1200px = 200px) to the main column, which is currently 800px:

.single #primary article.post, .single #primary article.jetpack-portfolio, .single #primary article.attachment, .page #primary article.page {
  max-width: 1000px;
}

Let me know how it goes.

Thanks for the feedback, I will try this when I am not sleep deprived.

I am not sure what went wrong with the child theme, my child theme plugin was acting up so a developer friend that was visiting took over while I worked on other projects, he is now gone so I would have to e-mail him to find out what he did.

OK, let me know how it goes!

Here are a couple of good child-theme tutorials:

https://www.smashingmagazine.com/2016/01/create-customize-wordpress-child-theme/

It looks to me like you’re just missing the standard required lines that should go at the top of the child-theme stylesheet for your CSS to be picked up. If you have a peek at the tutorials you’ll see what’s needed.

Let me know if you need further help!