[Resolved] Archive title scaling on mobile

[Roman]

I have mentioned that archive titles (h1 .page-title) don’t scale down going to mobile view, like post titles (h1 .entry-title) do. Is it a feature or a bug? I would like both post titles and archive titles behave the same way. Currently, archive titles are just so huge on mobile. The taxonomy description could scale down as well…

[Tom]

The archive titles are much smaller by default.

You can adjust them like this:

@media (max-width: 768px) {
    .page-header h1 {
        font-size: 18px;
    }
}

[Roman]

I am not sure we are talking about the same titles. Please have a look for example here http://telezjetele.cz/rubrika/za-humny/ – title of this archive page is huge and doesn’t scale down (description text as well).

CSS provided above doesn’t work for me.

[Leo]

Hi there,

The title is currently taking style from this CSS you’ve added:

.page-header h1 {
    font-size: 2.15em;
    margin-bottom: 0.25em;
}

The description is taking style from this:

.taxonomy-description {
    font-size: 1.1em
}

Is this not what you wanted?

[Roman]

I have forgotten I previously set this CSS, thank you for pointing me there.

Now I would like if the title behaved the same way like any h1 tag. Could you help me with a proper CSS?

[Leo]

Hmm if you remove the custom CSS style for it then it should inherit from normal setting.

[Roman]

Yes, but h1 with class=”page-title” has different setting than h1 which can be set via customizer > typography > content > H1

[Leo]

Ahh I think you are correct 🙂

So you can set the desktop/tablet size by this CSS:

@media (min-width: 769px) {
    .page-header h1 {
        font-size: 18px;
    }
}

mobile size:

@media (max-width: 768px) {
    .page-header h1 {
        font-size: 18px;
    }
}

[Roman]

Thank you!

[Leo]

No problem 🙂

[Tim]

Just came across this issue, where using the customiser to change font size and weight for h1 took effect almost everywhere, but not on the category page headings which use page-title instead of entry-title. Is this going to be corrected in future updates? I currently can’t find any way with the customiser to change the page-title font sizes. It originally happened for widgets too, until I found the separate section for widgets in typography. Can we get a similar page section added so I don’t have to mess about trying to write my own css please 🙂

Thanks

[Tom]

Absolutely, this will be corrected in the next version 🙂

[Tim]

Awesome, thanks Tom!

[Author]

Posts