Customize Blog and Portfolio Categories Appearance

mchadwick171

Hello,

Is it possible to use custom CSS to change the size of the listed categories on the blog (https://awaywithmeredith.com/blog/) and portfolio (https://awaywithmeredith.com/travel-gallery/) pages of my site? Ideally in a way that they could be responsive through min and max width maybe?

Thank you!

Phil

Hi,

Can you explain in more detail what you would like to achieve?

It would be best if you attach an image with a visualization showing how you want it to look.

I would probably be able to help you with a custom CSS, but I want to know exactly what should be changed.

Thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

mchadwick171

Hi,

Yes, of course.

So I am trying to change the overall size of the category list text and underline (on blog and portfolio pages, see links above). I'd like it to size responsively for desktop, tablet, and mobile views. Especially on mobile the text and underline size is way too big. I've attached a photo I manipulated in Photoshop so you can see what I mean by shrinking them.

Thanks!

Phil

Here you have a CSS for it:

@media only screen and (min-width: 960px) {
/*desktop*/
 #Filters .categories a{
   font-size: 15px;
 }
}
@media only screen and (min-width: 769px) and (max-width: 959px) {
/*tablet*/
 #Filters .categories a{
   font-size: 14px;
   padding: 10px 15px!important;
 }
}
@media only screen and (max-width: 768px) {
/*mobile*/
 #Filters .categories a{
   font-size: 12px;
   padding: 10px 15px!important;
 }
}

Thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

mchadwick171

Thank you! Last thing regarding the categories, how do I change the underline color of the currently selected category? I couldn't figure out the CSS.

Phil

You can change it with this CSS:

#Filters .filters_wrapper ul li.current-cat a::after{
 background-color: #ff0000!important;
}

Thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

mchadwick171

Amazing, thanks!