How to change Blog Title Size?

#1. All Blog Titles

To change Blog Title Size on all blog pages, you can follow these steps

First, click the Site Styles icon

At Fonts > Click the arrow icon

Next, click Assign Styles

Scroll down to these positions. You can change the title size here.

These options will change Title Size in Blog List Pages Only. With Blog Posts, you can use this to Custom CSS box

div.blog-item-title h1 {
    font-size: 30px !important;
}

#2. Blog Titles on Desktop Only

You can use this code to Custom CSS box

@media screen and (min-width:768px) {
h1.blog-title a, div.blog-item-title h1 {
    font-size: 30px !important;
}}

#3. Blog Titles size on Mobile Only

You can use this code to Custom CSS

@media screen and (max-width:767px) {
h1.blog-title a, div.blog-item-title h1 {
    font-size: 30px !important;
}
}

#4. Blog Title Size on Specific Blog Page

First, you need to find Blog Page ID. In my example, it is:

• #collection-6677756d03a4f15ba27ce9d8

Next, you need to change # to dot . symbol, so new ID will be:

• .collection-6677756d03a4f15ba27ce9d8

Next, use this code to Custom CSS box

/* Blog titles size */
.collection-6677756d03a4f15ba27ce9d8 {
h1.blog-title a, div.blog-item-title h1 {
    font-size: 30px !important;
}
}

#4.2. Blog Titles Size on Specific Blog Page – Desktop Only

Find ID, then use CSS code like this

@media screen and (min-width:768px) {
.collection-6677756d03a4f15ba27ce9d8 {
h1.blog-title a, div.blog-item-title h1 {
    font-size: 30px !important;
}}}

#4.3. Blog Titles Size on Specific Blog Page – Mobile Only

Find ID, then use CSS code like this

@media screen and (max-width:767px) {
.collection-6677756d03a4f15ba27ce9d8 {
h1.blog-title a, div.blog-item-title h1 {
    font-size: 30px !important;
}}}