Blog container issues

Support
#1

please see screenshot.

how do I get the category to fit in the post container?

thanks

#2

Hello @anncox1289,

Thanks for asking. :slight_smile:

You can add following CSS under X > Theme Options > CSS:

.p-meta>span>a {
    white-space: normal !important;
}

1- I have found the proper CSS code selector using the Chrome browser Developer Toolbar:

https://www.youtube.com/watch?v=wcFnnxfA70g

2- For the CSS code itself, I suggest that you get started with this tutorial:

https://www.youtube.com/watch?v=yfoY53QXEnI

Thank you.

#3

thank you. is there any way to make the containers and their inside contents smaller on the page. they are really big as is.

#4

Hi There @anncox1289

Could you please try adding the following CSS rule and see if that helps.

.blog .p-meta {
    font-size: 50% !important;
}

Hope that helps.

#5

it didn’t do anything.

what’s another option?

#6

Hi There @anncox1289

I’m sorry, are you referring to blog index page or single blog post (when you’re inside a post).

When you’re inside a post, you can use the following CSS rule instead.

.single-post .p-meta {
    font-size: 50% !important;
}

If you’re referring to something else, could you please provide us with a screenshot along with the page/post URL so that we can assist you accordingly.

Thanks!

#7

#8

these post and the font within the post are huge. how do i minimize the header and the post font on the blog index page with the individual posts.

thanks

#9

Hi There,

Thanks for writing in again!

You can make it with below CSS.

.entry-title {
font-size: 120% !important;
}
.entry-content {
font-size: 16px !important;
}

You can adjust the value further.

Hope this helps!

#10

it still did not work

#11

i adjusted the value to 100px and 10px—still nothing.

#12

Hello @anncox1289,

Thanks for updating the thread.

Please try using following CSS under X > Theme Options > CSS:

.blog .entry-title, .single-post .entry-title {
    font-size: 20px !important;
}

.blog .p-meta, .single-post .p-meta {
    font-size: 14px !important;
}

.blog .entry-content {
    font-size: 16px !important;
}

.single-post .entry-content h4 {
    font-size: 18px !important;
}

1- I have found the proper CSS code selector using the Chrome browser Developer Toolbar:

https://www.youtube.com/watch?v=wcFnnxfA70g

2- For the CSS code itself, I suggest that you get started with this tutorial:

https://www.youtube.com/watch?v=yfoY53QXEnI

Thank you.

#13

it messed up all the other font size on my pages.

#14

why has this post changed and the other ones have not? this is really frustrating

#15

Hi There,

Sorry for the fuss that is happening to your site, but I believe that is because of your caching plugins (WP-Super-Cache), I advise that you Clear and Deactivate all your site caching features/plugin while the site is still in development stage.

Ok now, please remove all the custom CSS given above, and let’s dive on what really is causing your issue (huge font size).

Navigate to X > Theme Options > Typography > ROOT FONT SIZE, as you can see your FONT SIZE XL (that is for extra large screen 1200px and above) is set to 30px. 30px is too much as a root font size, please adjust that between 14px - 18px (or where you see it fits). Adjust your FONT SIZE (LG) as well.



Remember, to Clear and Deactivate your caching plugin and your browser’s cache or else you won’t be able to see the changes immediately.

Hope it helps,
Cheers!

#16

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.