Adjusting blog post heading size

I am trying to adjust the heading size of a blog post title. I can do this for desktop but not mobile view.

I have this CSS code implemented so that heading sizes are smaller on mobile for other webpages. If I don't have this then headings for a single word go across multiple lines on mobile view. I don't think removing the below CSS is an option as it will mess up every other pages view on mobile. I think I need a CSS for adjusting blog headings on mobile that works with the below CSS code.

// Mobile Heading Sizes //

@media only screen and (max-width: 640px) {
   h1 { font-size: 59px !important; }
}

@media only screen and (max-width: 640px) {
   h2 { font-size: 43px !important; }
}

@media only screen and (max-width: 640px) {
   h3 { font-size: 25px !important; }
}
@media only screen and (max-width: 640px) {
   h4 { font-size: 8px !important; }
}

Can you share link to blog? We can give code for blog heading easier

Also, you can make your code shorter, by using this

// Mobile Heading Sizes //

@media only screen and (max-width: 640px) {
   h1 { font-size: 59px !important; }
h2 { font-size: 43px !important; }
h3 { font-size: 25px !important; }
 h4 { font-size: 8px !important; }
}

Thank you will update.

the blog website is www.idl.au -> it's currently private as it's launching on Jan 3rd.

Password is WineCider to view

3 hours ago, Shannon99 said:

Thank you will update.

the blog website is www.idl.au -> it's currently private as it's launching on Jan 3rd.

Password is WineCider to view

You mean title on list page https://www.idl.au/news

or in individual posts? https://www.idl.au/news/automating-our-canning-pack-off-machinery

Both, unfortunately! Both don't shrink the blog post title size on mobile view

On 12/28/2022 at 9:57 AM, Shannon99 said:

Both, unfortunately! Both don't shrink the blog post title size on mobile view

So you mean change blog title size on desktop only (for both blog list + individual posts)?

The issue is with the mobile view. The reason the above CSS is implemented is to change the size of normal headings on pages to fit on mobile view. However this overrides adjusting the heading size on mobile view for the heading of blog posts (for both blog list + individual posts). As such, when viewing the blog pages on mobile, single words from headings are often across multiple pages. This is where the issue is and what I'm trying to resolve. Desktop view is largely okay, mobile is where I'm having the issues.

Hi,

Use this new code

// Mobile Heading Sizes //

@media only screen and (max-width:767px) {
body:not([class*="type-blog"]) {
   h1 { font-size: 59px !important; }
h2 { font-size: 43px !important; }
h3 { font-size: 25px !important; }
 h4 { font-size: 8px !important; }
}}