[Share] Change Blog Title size

You can use these CSS code (Website Tools > Custom CSS) to change Blog Title size (all pages, one page, desktop only, mobile only,..).

#1. All Blog Titles

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

Click Site Styles icon on top right of site.

At Fonts > Click Arrow icon

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 size on Desktop Only

Use 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

@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 CSS code

/* 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 Blog Page 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 Blog Page 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;
    }
  }
}