Docs

[nathan]

Hi there,

This is a simple question, and the answers that I found in the forums didn’t work for me?

I’m just trying to adjust the size of my headings, for example, the H1 headings look too big?

I inserted the following into the customiser with different pixel sizes, but nothing changed?
h1, .h1 { font-size: XXpx; }
h2, .h2 { font-size: XXpx; }
h3, .h3 { font-size: XXpx; }
h4, .h4 { font-size: XXpx; }
h5, .h5 { font-size: XXpx; }

I also cannot find any options to customise this? I’ve never come across a theme that doesn’t allow menu based adjustment of headings size? Am I missing something?

Any assistance would be appreciated.

I want to change the heading sizes in the Blog Mostly (see pic).

[Christian]

Hey Nathan,

Please check if you have CSS syntax errors in your custom CSS. If you’ve checked already, please give us access to your WordPress admin.

Thanks.

[nathan]

This reply has been marked as private.

[Rad]

Hi there,

That CSS should work, heading font sizes are static and permanent which can easily implemented by few lines of CSS instead of having it runs byt bloated options. Though, I can’t find what causes the issues since your site is no longer using the X theme.

Thanks!

[nathan]

This reply has been marked as private.

[Joao]

Hi There,

You are missing on Customizer an } after :

.x-logobar{
  background-color: transparent !important;

Hope it helps

Joao

[nathan]

Hi,

So sorry, told you i was a newbie. Thanks.

Could you please advise if i can set a max height for displaying images on the blog page and posts?

I’ve attached an image. I have searched the forums and tried this:

.single .entry-featured {
height: 200px;
}

and

.blog .entry-featured {
height: 200px;
}

Neither worked

I’ve just started a course in CSS, so don’t really know what i’m doing 🙁

[Joao]

Hi There,

First of all, please don´t be sorry, nobody is born knowing these things, it is our pleasure(and job!) to help you trough the process.

Before going replying your questions, If you are keen to learn more CSS there is a very short video series of CSS among many other AWESOME videos on a youtube channel called DevTips, I really reccomend, it is super fun and one of the best tuorials I came across, it is called CSS Basics or somethig like that.

To adjust the size of your feature images add the following code to Appereance > customizer > custom > CSS

.single-post .entry-featured {
width:50%;
margin:0 auto;
display:block;
}

.blog .entry-featured {
width: 50%;
margin: 0 auto;
}

.archive .entry-featured {
width: 50%;
margin: 0 auto;
}

Hope that helps,

Feel free to reach us if you have questions or need help with anything else.

Joao

[nathan]

Hi There,

Cheers for the response. Its works.

However, you’ll notice the image is square. What i’m trying for is to make the “placeholder” for the image be full width, and a set MAX height. So basically, irrespective of the image uploaded, I want the blog page to only show a certain rectangular dimension (even if this means the image appears cropped).

I know this can be remedied by changing the resolution of the image that is uploaded, but i cant reply on our content creator to do this and possibly mess with how the blog page looks if they don’t do it correctly.

I tried this but it didnt work? is this possible?

.single-post .entry-featured {
width:100%;
max-height: 100px
margin:0 auto;
display:block;
}

.blog .entry-featured {
width: 100%;
max-height: 100px
margin: 0 auto;
}

.archive .entry-featured {
width: 100%;
max-height: 100px
margin: 0 auto;
}

Once again, cheers for the assistance.

[Rad]

Hi there,

You have to add overflow:hidden; for cropping 🙂

.single-post .entry-featured {
width:100%;
max-height: 100px
margin:0 auto;
display:block;
overflow:hidden;
}

.blog .entry-featured {
width: 100%;
max-height: 100px
margin: 0 auto;
overflow:hidden;
}

.archive .entry-featured {
width: 100%;
max-height: 100px
margin: 0 auto;
overflow:hidden;
}

Cheers!

[nathan]

Hi This hasn’t worked?

[Rue Nel]

Hello There,

There is a typo error in your code. Please use this instead:

.single-post .entry-featured {
  width:100%;
  max-height: 100px!important;
  display:block;
  overflow:hidden;
}

.blog .entry-featured {
  width: 100%;
  max-height: 150px!important;
  overflow:hidden;
}

.archive .entry-featured {
  width: 100%;
  max-height: 100px!important;
  overflow:hidden;
}

Hope this helps. Kindly let us know.

[nathan]

Thanks

That worked, now one last question, can i change the size of this text? “Leave a reply”?

Where can i find this information? Is there a list of all the elements? such as “.single-post .entry-featured”

Like, how would i ever know this was called that?

[Christopher]

Hi there,

Please add this :

h3#reply-title {
    font-size: 170.7%;
}

We have listed most important CSS classes in this KB artcile https://community.theme.co/kb/css-class-index/

But you can inspect all element using chrome developer tools.

Hope it helps.

[Author]

Posts