By Stephen Walker

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 be the indicator of 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 December 25, 2021

share the article

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

  • Customizing the Off Canvas Background

    Styling the off-canvas element is "easy" if you know which part to target.

  • Customizing Toggle (Accordion) Headings

    In a recent project and for this site's new menu, I needed to change the default of the toggle heading and place the icon on the right side but not pushed the full width of the toggle panel. Fortunately, this is easy to do with a couple of lines of CSS.

  • Buttons, buttons, and more buttons

    One of the best things about Avada is the flexibility to create custom variations of elements and save them to the library for later use.

  • List of Links

    I am working on a new project and recently discovered some great CSS features --- text-underline-position and text-decoration-thickness.

  • Border between columns

    Since Avada currently does not have border settings for small and medium screens, this was our workaround

  • Test Layout – The Becker

    Trying to duplicate the basic look and feel of Dirk Beckers' website using Avada.