Team – 3 Lines of Text

Description

• adding 3 lines text to Team (List) Section Title, and change style
• view demo – password: abc
• buy me a coffee

#1. Install Code

#1.1. First, add 3 lines of text to Section Title + make word: tell it italic, like this.

#1.2. Hover on top right of section > Click EDIT SECTION > at Format > Anchor Link > enter word: team-3-lines

#1.3. Use code to Custom CSS box

section[id*="team-3-lines"] {
  --firstTitleFontSize: 17px;
  --firstTitleColor: #B66A48;
  --firstTitleLetterSpacing: 4px;
  --secondTitleFontSize: 88px;
  --secondTitleItalicColor: #B66A48;
  --thirdTitleFontSize: 26px;
  --thirdTitleColor: #B66A48;
  --gapBetweenFirstAndSecondTitle: 30px;
  --gapBetweenSecondAndThirdTitle: 40px;
  --thirdTitleUnderlineGap: 10px;
  --mobileFirstTitleFontSize: 13px;
  --mobileSecondTitleFontSize: 42px;
  --mobileThirdTitleFontSize: 18px;
  --mobileGapBetweenTitles: 20px;
  .list-section-title {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    width: 100%;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    justify-self: stretch !important;
    justify-content: stretch !important;
    align-items: center;
    column-gap: var(--gapBetweenSecondAndThirdTitle);
    row-gap: var(--gapBetweenFirstAndSecondTitle);
    text-align: left !important;
    box-sizing: border-box;
  }
  .list-section-title > p {
    margin: 0 !important;
    padding: 0;
    min-width: 0;
    max-width: none;
    text-align: left !important;
  }
  .list-section-title > p:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    font-size: var(--firstTitleFontSize);
    letter-spacing: var(--firstTitleLetterSpacing);
    color: var(--firstTitleColor);
  }
  .list-section-title > p:nth-child(2) {
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
    font-size: var(--secondTitleFontSize);
  }
  .list-section-title > p:nth-child(2) em {
    color: var(--secondTitleItalicColor);
  }
  .list-section-title > p:nth-child(3) {
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
    font-size: var(--thirdTitleFontSize);
    white-space: nowrap;
    text-align: right !important;
  }
  .list-section-title > p:nth-child(3) a {
    display: inline-block;
    color: var(--thirdTitleColor);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: var(--thirdTitleUnderlineGap);
  }
  @media (max-width: 767px) {
    .list-section-title {
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: auto;
      row-gap: var(--mobileGapBetweenTitles);
    }
    .list-section-title > p:nth-child(1),
    .list-section-title > p:nth-child(2),
    .list-section-title > p:nth-child(3) {
      grid-column: 1;
      grid-row: auto;
      justify-self: start;
      text-align: left !important;
    }
    .list-section-title > p:nth-child(1) {
      font-size: var(--mobileFirstTitleFontSize);
    }
    .list-section-title > p:nth-child(2) {
      font-size: var(--mobileSecondTitleFontSize);
    }
    .list-section-title > p:nth-child(3) {
      font-size: var(--mobileThirdTitleFontSize);
      white-space: normal;
    }
  }
}