Broadband Label Test

Notes:

  • The plugin Flying Scripts prevents the labels from appearing on the page. If we really need that plugin, we have to add the URLs of all pages with Broadband Labels to the "disable on page" box in Settings > Flying Scripts for it to work.
  • Label stretches to fit container, so make sure to put it inside a container with the desired width or set a max-width on the label itself (with class "cf_bcl_wc") or else it will cover the width of the whole page.
  • Must be at least 565px wide or else the styling on the label starts to get funky. Could be an issue on mobile with screen sizes smaller than that. You can see the 300px example below has some overlapping elements and wrapping issues. These disappear around 565px.
  • I have it set to stack on mobile (at screen width 767px) so you can see what happens when you make the screen that size.
  • There are significant issues with the markup. The labels use heading tags which can interfere with the headings already on the page, among other issues. SEO nightmare. Screen reader nightmare.
  • Styling inherits some font properties from the site's custom stylesheet, like the label headings using "text-transform: uppercase" on this page. Probably not a huge deal, and we might even want that for cohesion, but it's still something to keep in mind.

565px max-width

300px max-width