Jump to content

Adjusting blog post heading size

Recommended Posts

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; }
}

Link to comment
  • Replies 7
  • Views 808
  • Created
  • Last Reply

Top Posters In This Topic

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; }
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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)?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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.

Link to comment
  • 4 weeks later...

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; }
}}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.