Custom Block Title

Learn how to change the individual block title properties.

Explanation

First, you have to check the block class. You can use the browser site inspector.

E.g for: Block #5 it will be -> .rui-fp-block--5

• Breakpoints:

    xs: 0,
    sm: 320px,
    md: 768px,
    lg: 1100px,
    xl: 1300px,
    xxl: 1900px

Sample SCSS code to add

Advanced -> Raw SCSS

/* Block #5 */
.rui-fp-block--5 {
	.rui-block-title {
		@include media-breakpoint-up(lg) {
		color: red;
		}
		
		@include media-breakpoint-only(md) {
		color: purple;
		}
				
		@include media-breakpoint-between(xs, sm) {
		color: blue;
		}
	}
}

Results:

Mobile

Tablet

Desktop