If your styles include an underline or bottom border to text that includes letter spacing, you will see that the underline or bottom border extends beyond the last letter. This is because the letter-spacing property adds white space after each letter. This additional white space is part of the letter causing the extended underline.
Continue readingRemoving the extended bit from text underlining when letter spacing is applied
On Chrome, a sticky header was obscuring the content of an anchored section even though scroll-margin-top was properly set.
Continue readingscroll-margin-top not working on Chrome
Laying out a definition list to look like a telephone directory requires 2 lines of CSS using grid.
Continue readingDefinition List with CSS Grid
I was working on a site that was color-coding project types and there was a need to use one color with varying opacity per project type. For the full opacity colors, I could use the hex value, the rgb syntax, or the rbga syntax with “1” as the opacity. But with so many style declarations …
Continue reading “RGB Values as CSS Variables”
Continue readingRGB Values as CSS Variables
I had a situation where images in flexbox containers were not behaving responsively, in that they did not scale proportionately depending on viewport width.
Continue readingImages not Scaling Correctly in Flexbox Containers