Justify Text?

Also, when I change the size of the ingredients/directions font in the recipe card theme, it does not show up on the blog recipe card. The other fonts (headers, yield, etc.) are responding to changes.

https://www.ramsonsandbramble.com/2013/12/best-ever-borek.html

This font is 13px in the recipe card theme, but is displaying at about 16px here. I have currently set the body font of the whole blog to match it so it doesn’t look untidy, but before the body font of the whole blog was smaller and I would like to return to that if possible.

Thanks again!

Hi –

You can justify the directions by adding this to your styles:

.blog-yumprint-method-item {
text-align: justify !important;
}

As for the font size problem, can you switch it back to the 13px font on the body so that I can see how to fix it for Recipe Card?

Thanks!

Hi!

Thanks very much for your response. Can I set the ingredients to always show up bold using a similar code to the one you just gave me?

Maybe…

.blog-yumprint-ingredients-item {
text-weight: bold !important;
}

Or something like that?

I have also changed the body font back. It is currently 14px and it is set to the same in the Recipe Card theme.

Thanks!

You’re welcome!

You can set the ingredients to bold within the template editor. Go to the font tab, then click on the ingredients in the recipe preview and you’ll be able to set them to bold.

It looks like you have a style in your theme that is overriding Recipe Card’s font size. The style looks like this:

.hentry ul li, .hentry ol li {
font-size: 16px;
}

If you change that to 14px. Your problem should be solved. If you are unable to locate that style and change it, let me know and we can come up with another way around it.

Thanks!

Hi!

Wonderful! That fixed it!

When I click on the ingredients text it selects the instructions, description and notes text too. It’s just the ingredients that I would like bold.

Thanks again – top notch support!

You’re right. I forgot about that.

This should work:

.blog-yumprint-ingredient-item {
font-weight: bold !important;
}

Cheers! All fixed!