Decrease size of post info on category page

If you find this tweak helpful:

Beginners

Tweaking Elegant Themes involves creating a child theme and editing PHP and CSS files within a text editor. If you have never done this you may want to read our guide on creating a child theme. All tweaks are written with the assumption that you have a default installation of your theme.  Any tweaks or changes you may have previously made to your theme could affect the outcome of the tweaks on this site. All tweaks should be tested before applying to a live site. 

If your post titles are only a few words, the category page looks great on Foxy. But if your post titles tend to be lengthy, the post title, description, and read-more button take up a lot of space. Although visually appealing, some might rather reduce the sizes to fit more content. This tweak shows you how to do this and you can make other changes such as background-color, font-size and color, etc.

CSS

Locate your style.css file in /foxy-child/

Add this code:

article.entry-post.clearfix a.read-more {
padding: 6px 9px;
font-size: 70%;
}

.post-description h2 {
font-size: 125%;
letter-spacing: -2px;
line-height: .2em;
}

article.entry-post.clearfix p {
font-size: 90%;
line-height: 20px;
}

That's it. You can play around with the numbers and percentages to make it fit your needs. You can also throw in "background-color" to change the color of the read more button or the box behind your post title. The code above does break the mobile layout so you can either disable mobile or add the following CSS code to make it work with mobile:

@media only screen and (max-width: 767px) {
.post-description h2 a {
padding: 10px 15px;
}
}

@media only screen and (max-width: 767px) {
.post-description h2 {
font-size: 100%;
letter-spacing: -2px;
line-height: 1em;
}
}

@media only screen and (max-width: 767px) {
article.entry-post.clearfix p {
font-size: 90%;
line-height: 20px;
}
}

 

Post a Reply

Your email address will not be published. Required fields are marked *