Links
Comment on page

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