Font Size for Item Subtitle

  • Resolved egurry

    (@egurry)


    2 years, 3 months ago

    Hi. Great plugin, thank you! Trying to get the item subtitle to appear in a larger, bold font. The bold is working, but the font size won’t change. I was able to make the font bigger for the title, but the same structure doesn’t work for the subtitle.

    Here is the CSS I am using with your shortcode:

    .authors-list-item {
  border-radius: 10px;
  padding: 10px 10px 0px 10px;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
}

.authors-list-item-title a {
  font-size: 22px;
  font-weight: 800;
}

.authors-list-item-subtitle {
  font-size: 24px;
  font-weight: 600;
}
Viewing 7 replies - 1 through 7 (of 7 total)
  • Thread Starter egurry

    (@egurry)

    Actually, upon further testing, none of the font modifications seem to be working. When I make the change in Elementor to the CSS, the item-title looks like it updates, but when I preview the page it is unchanged.

    Thread Starter egurry

    (@egurry)

    I would also love to know how to center the authors-list-item-thumbnail in the column (at some page widths it appears left-aligned). I have tried this CSS but it didn’t work:

    ‘.authors-list-item-thumbnail {
    text-align: center;
    }’

    Hi @egurry

    Could you provide us the exact link to your site where you are having the issue?

    Thread Starter egurry

    (@egurry)

    I created a page that contains just the authors list shortcode (actually, 2 of them, one for desktop and one for mobile):

    https://dev.nftomatic.app/authors-list-test/

    Thread Starter egurry

    (@egurry)

    Here is the current state of the shortcode and CSS:

    [authors_list post_types=”product” style=”1″ columns=”4″ amount=”12″ show_count=”yes” show_link=”no” count_text=”NFTs” authors_list orderby=”post_date”]

    .authors-list-item {
  border-radius: 10px;
  padding: 10px 10px 0px 10px;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
}
.authors-list-item-title a {
  font-size: 14px;
  font-weight: 800;
}
.authors-list-item-subtitle {
  font-size: 12px;
  font-weight: 600;
}
.authors-list-item-thumbnail {
    text-align: center;
}

    Hi @egurry

    Could you once try the below CSS code in Appearance -> Customize -> Additional CSS section and see if that helps you to resolve this issue:

    .authors-list-item-subtitle {
  font-size: 12px !important;
  font-weight: 600 !important;
}
.authors-list-item-thumbnail img {
  display: block !important;
  margin: 0 auto !important;
}
    Thread Starter egurry

    (@egurry)

    You nailed it! Thanks for that. Someday I will learn the importance of using !important in CSS. For the record, here is the final CSS I used to (1) add a shadow, (2) make the title bigger/bolder, (3) make the subtitle bigger/lighter, and (4) center the thumbnail:

    .authors-list-item {
  border-radius: 10px;
  padding: 10px 10px 0px 10px;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
}
.authors-list-item-title a {
  font-size: 18px !important;
  font-weight: 800 !important;
}
.authors-list-item-subtitle {
  font-size: 16px !important;
  font-weight: 300 !important;
}
.authors-list-item-thumbnail img {
  display: block !important;
  margin: 0 auto !important;
}
    • This reply was modified 2 years, 3 months ago by egurry.
Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Font Size for Item Subtitle’ is closed to new replies.

Tags