On Chrome, a sticky header was obscuring the content of an anchored section even though scroll-margin-top was properly set.
Continue reading “scroll-margin-top not working on Chrome”Observe
As I’ve found applicability to use the trifecta of JavaScript observers in my projects, I’ve tried to blog about them. So far, I’ve written about MutationObserver and IntersectionObserver. On a recent project, I had the opportunity to use ResizeObserver.
Continue reading “Observe”Definition List with CSS Grid
Laying out a definition list to look like a telephone directory requires 2 lines of CSS using grid.
Continue reading “Definition List with CSS Grid”WooCommerce: Free Shipping For A Single Product, Standard Shipping For All Other Products
Tutorials for setting up free shipping for a single product typically include the following steps:
- Creating a new Shipping Class under WooCommerce > Settings > Shipping > Shipping Classes > Add Shipping Class, typically called “Free Shipping”.
- Assigning the new Shipping Class to the individual product under Product data > Shipping > Shipping Class
- Setting up a Flat Rate shipping method based on the Shipping Class under WooCommerce > Settings > Shipping > Shipping Zones.
However, in setting up this flat rate, it is assumed there is a flat rate shipping cost for all of the other products. This was not the case for a store I was administering.
Continue reading “WooCommerce: Free Shipping For A Single Product, Standard Shipping For All Other Products”RGB Values as CSS Variables
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 I wanted to use a CSS variable (custom property) to define the color in one location.
Continue reading “RGB Values as CSS Variables”