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”
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”
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”
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”