Introducing Solo Pine Mods | An affordable & reliable way to customize your theme

Okay
  Print

Changing font size in Sprout & Spoon - CSS Code

Please note: This article is specifically for the Sprout & Spoon theme. 




Would you like to change the font size of any of Sprout's text elements? Below, we've noted nearly all of the theme's text elements and how to target them with CSS in order to change their font-size.  

Simply locate the text element in the list below you'd like to alter, copy the whole line of code it includes, and paste it into WordPress Dashboard > Appearance > Customize > Custom CSS.  We've listed each item with its default font size, so feel free to adjust it to whatever pixel size you prefer instead.  

Should you have any questions regarding the below elements, want any clarifications, or would like a hand adjusting font-size, please don't hesitate to open up a new support ticket and let us know!



/* ----- GENERAL BODY TEXT ----- */
p {font-size: 14px;}
/* ----- HEADER AREA ----- */
/* Navigation menu items */ #nav-wrapper .menu li a {font-size: 13px;}
/* Navigation sub-menu items */ #nav-wrapper .menu li a {font-size: 11px;}
/* Top-bar search text */ #searchform input#s {font-size: 13px;}
/* ----- FEATURED AREA ----- */
/* Category */ .feat-inner .cat a {font-size: 11px;}
/* Post title */ .feat-inner h2 a {font-size: 22px;}
/* ----- POST HEADER ----- */
/* Standard post header title */ .post-header h2 a, .post-header h1 {font-size: 28px;}
/* 3 Column Grid post header title */ .grid-item .post-header h2 a {font-size: 17px;}
/* 2 Column Grid post header title */ .sp-grid.col2 .grid-item .post-header h2 a {font-size: 22px;}
/* List post header title */ .list-item .post-header h2 a {font-size: 26px;}
/* Post header category */ .post-header .cat a {font-size: 11px;}
/* ----- POST & PAGE CONTENT ----- */
/* Theme's body text */ .post-entry p {font-size: 14px;}
/* Post/Page blockquotes */ .post-entry blockquote p {font-size: 22px;}
/* Post/Page numbered lists & bulletted lists */ .post-entry ul li, .post-entry ol li {font-size: 14px;}
/* 'Continue Reading' link */ .more-link {font-size: 19px;}
/* Post/Page Body H-tags */
.post-entry h1 {font-size: 28px;}
.post-entry h2 {font-size: 25px;}
.post-entry h3 {font-size: 22px;}
.post-entry h4 {font-size: 19px;}
.post-entry h5 {font-size: 17px;}
.post-entry h6 {font-size: 15px;}
/* ----- RECIPE CARD ----- */
/* Recipe Title */ .post-entry .recipe-overview h2 {font-size: 22px;}
/* Serving & Cook Time Text */ .recipe-overview .recipe-meta span {font-size: 12px;}
/* "Print Recipe" Button */ .recipe-overview a.sp-print {font-size: 12px;}
/* Ingredients, Instructions, Notes Titles */ .post-entry .recipe-title {font-size: 14px;}
/* Ingredients List Items */ .post-entry .sp-recipe ul li {font-size: 14px;}
/* Instructions List Items */ .post-entry .recipe-method .step p {font-size: 14px;}
/* Notes Text */ .post-entry .recipe-notes p {font-size: 14px;}
/* ----- INDEX SHORTCODE ROWS ----- */
/* Section title */ .post-entry .index-heading > span {font-size: 16px;}
/* "View All" link */ .post-entry .index-heading a {font-size: 11px;}
/* ----- CONTACT FORM 7  ----- */
/* Name, email, subject, message, etc. labels */ .wpcf7 p {font-size: 14px;}
/* Input fields */ .wpcf7 input, .wpcf7 select, .wpcf7 textarea {font-size: 14px;}
/* Submit button */ .wpcf7-submit {font-size: 14px;}
/* ----- ARCHIVE PAGE ----- */
/* Browsing category, tag, etc. */ .archive-box span {font-size: 12px;}
/* Category, tag, etc. title */ .archive-box h1 {font-size: 28px;}
/* ----- POST & PAGE FOOTER ----- */ 
/* Post date & author */ .meta-text {font-size: 12px;}
/* Post/page "By" text */ .by {font-size: 13px;}
/* Post Tags */ .post-tags a {font-size: 10px;}
/* Previous Post / Next Post */  .single .post-pagination {font-size: 13px;}
/* ----- AUTHOR BOX ----- */
/* "About" text */ .author-content h5 .about-italic {font-size: 16px;}
/* Post author name */ .author-content h5 a {font-size: 14px;}
/* Author bio text */ .author-content p {font-size: 14px;}
/* ----- YOU MIGHT ALSO LIKE ----- */
/* Section's title */ .post-related h4.block-heading {font-size: 13px;}
/* Post titles */ .item-related h3 a {font-size: 16px;}
/* Post date */ .item-related span.date {font-size: 14px;}
/* ----- POST COMMENTS ----- */
/* Section's title */ .post-comments h4.block-heading {font-size: 13px;}
/* "Reply" button */ .post-comments span.reply a {font-size: 10px;}
/* "Leave a Reply" Text */ #respond  h3 {font-size: 12px;}
/* "Cancel Reply" button */ #respond h3 small a {font-size: 11px;}
/* Name, email, website, etc. */ #respond label {font-size: 13px;}
/* "Post Comment" button */ #respond #submit {font-size: 10px;}
/* Commentator's name */ .thecomment .comment-text h6.author, .thecomment .comment-text h6.author a {font-size: 13px;}
/* Comment's date & time */ .thecomment .comment-text span.date {font-size: 12px;}
/* Comment's text */ .comment-text p {font-size: 14px;}
/* ----- HOMEPAGE POST PAGINATION ----- */
/* Homepage Older Posts/Newer Posts */ .pagination a {font-size: 10px;}
/* ----- WIDGETS ----- */
/* Widget titles */ .widget-title {font-size: 11px;}
/* Solo Pine's Latest posts widget post titles */ .side-pop.list .side-pop-content h4 a {font-size: 14px;}
/* Solo Pine's Latest posts widget date */ .side-pop.list .side-pop-content span.date {font-size: 13px;}
/* Solo Pine's About widget text */ .about-widget p {font-size: 14px;}
/* Solo Pine's Promo widget title */ .promo-item a {font-size: 11px;}
/* Newsletter widget headline */ .subscribe-box h4 {font-size: 16px;}
/* Newsletter widget text (in content area) */ .subscribe-box p {font-size: 14px;}
/* Newsletter widget text (in sidebar area) */ .subscribe-box p {font-size: 13px;}
/* Newsletter "Your email address" text */ .home-widget .subscribe-box input {font-size: 13px;}
/* Newsletter widget "Subscribe" button */ .subscribe-box input[type=submit] {font-size: 12px;}
/* ----- FOOTER AREA ----- */
/* Instagram widget title */ .instagram-title {font-size: 12px;}
/* Footer social icon text */ #footer-social a {font-size: 11px;}
/* Footer Left text */ #footer-copyright p.left-copy {font-size: 12px;}
/* Footer Right text */ #footer-copyright p.right-copy {font-size: 12px;}
/* "Top" button */ .to-top {font-size: 10px;}