UPDATE: As of Avada 7.9, you can turn on text decoration in the body font settings. This is a great solution for most use cases.

One of the few instances where Avada handles accessibility incorrectly is hyperlinking within body content. According to guidelines, hyperlinks should be underlined and not solely rely on the color of the text to indicate a link. At least one feature request has been submitted for this. Additionally, the default paragraph width, which is based on the container it is in, could be too wide for comfortable reading — research shows a line length of about 80 characters is ideal — and require manipulating containers over and over, especially if you want images and other multimedia to appear large than the text (like medium.com and other news sites). Fortunately, some basic CSS can help us solve both.

Updated March 12, 2022: Due to some additional issues I ran into, I have moved the centering of the basic content and added a content- -centered class as well as a prose class for larger, more readable text.

.content h2 {
  font-size: clamp(1.4rem,calc(1rem + 1.8vw),2rem)!important;
  max-width:25ch;
  color:0e1d33;
}

.content h3 {
  font-size: clamp(1.4rem,calc(1rem + 1.4vw),1.8rem)!important;
  max-width:25ch;
}

.content :is(p,ul,ol,dl,h2,h3,h4,h5,h6) {
  max-width: 48rem; /* 768px */
}

.content--centered :is(p,ul,ol,dl,h2,h3,h4,h5,h6) {
  margin-left:auto;
  margin-right:auto;
}

.content :is(h2,h3,h4,h5,h6) {
  margin-top: 2rem;
  margin-bottom: 1rem;
}

.content p a, .content li a,.has-links :is(p,li,dd) a {
  text-decoration: underline !important;
}

/* for longer form content */
.prose :is(p,li,dd):not(td p) {
  font-size:1.2rem!important;
  line-height:1.6;
}

I use this on multiple sites for blog posts both in Gutenberg and the classic editor. I create a content area within a 1/1 column in a custom layout and assign the “content” class to it. As you can see with the code block above, it uses the full width of the column, white the text is constrained and hyperlinks are clearly visible.

Originally published on Dec. 25, 2021

assorted spicesGlobal Colors
Plugin Recommendation: Scripts Organizer

One Comment

  1. Roland! March 5, 2022 at 2:06 pm - Reply

    Thank you so much for this. It’s been driving me crazy!

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

RELATED ARTICLES

  • Read Customizing Post Pagination

    Customizing Post Pagination

    In this article, I show how CSS can be used to customize the Avada pagination element.

    February 20, 2023

  • Read Accordion Cards

    Accordion Cards

    Another custom accordion example using pseudo element.

    February 17, 2023

  • Read Moving away from builder settings

    Moving away from builder settings

    I am beginning to restructure my site to rely less and less on the Avada element settings in favor of site-wide styling.

    February 12, 2023

  • Read Horizontal Image Accordion

    Horizontal Image Accordion

    I just added a demo of an accordion-style image slider using nothing but Avada and some custom CSS.

    February 11, 2023

  • Read Styling the RankMath Sitemap

    Styling the RankMath Sitemap

    If you are a RankMath user, you may know that they recently introduced a feature that automatically generates an HTML version of the XML sitemap. This post is to share the CSS I am using to add some layout to an otherwise long list of links.

    December 11, 2022

  • Read Quick Tip: Faux Nested Columns

    Quick Tip: Faux Nested Columns

    Overcoming a shortcoming in Avada with some CSS.

    December 4, 2022