CSS

Ran into an issue with an e-commerce Product quantity field where the up / down arrows would not show, and were required to indicate more than one item could be purchased.

Read More

The Google Font Library is a great resource for free fonts.

Read More

SVGs, when resized, will not scale in proportion in older versions of Internet Explorer.

Read More

Offset Anchor Tag

HTML

January 09, 2019

Working with CSS fixed headers and HTML anchor tags can be a little tricky. The jump point will need to be offset by the height of the header, and other fixed elements.

Read More

Using fixed backgrounds on mobile devices can be tricky, as not all mobile devices support background-attached: fixed.

Read More

Ever wonder how to set the background colour for the page when printing via CSS?

Read More

This method comes in handy if you’re working with plugins and are unable to edit theme files, or external files at the risk of losing your styles with an update.

Read More

Great for drop downs, fly outs, and mobile menus.

Read More

jSON Instagram Slider

jQuery

October 25, 2017

Create a custom Instagram slider for your site using jSON and the following instructions…

Read More

CSS Slide-Reveal Search Field

HTML

September 20, 2017

Use HTML and CSS to toggle reveal the search input field. 

Read More

Use this function if you find yourself having to force your CSS styles with !important in your Child Theme.

Read More

Target IE with Media Queries

CSS

November 23, 2016

These are my go-to media queries when browser testing different versions of Internet Explorer

Read More

You can achieve more stylistic versatility within your WordPress backend, and theme, if you’re able to inject fonts within the WYSIWYG editor.

This is possible if you are using embedded fonts, or if you are using fonts from a hosted library using the below function, and the Advanced TinyMCE plugin addon.

Read More

Cross browser testing mobile devices can be very confusing when you take into account the various resolutions different devices.

Read More

This is a great and simple way to keep lists in alpha or numerical order, while splitting up the content to make it easier for the reader to digest.

Read More

Sub-navigation must be in a container

Read More

Mobile Stylesheet

CSS

July 21, 2015

My default mobile stylesheet.

Read More

My starter stylesheet when starting new projects:

Read More

Absolute Positioning

CSS

July 15, 2015

To centre an image inside of a div

Read More

Adding Border Radius to iFrame

CSS

September 18, 2014

IFrames can be difficult to customize.  If you want to add a border, or a box shadow to them, it can be simpler to do so if you wrap them in a parent div, and apply the necessary changes to this container.  Border-radius will work with a parent div, when you couple it with overflow: hidden; forcing the clipping of the contained elements, and giving the illusion of the effect you’re looking for.

Read More
katherine as a flat graphic icon

About Me

I’m an African / Ojibwe First Nations Web Developer living in Winnipeg, Manitoba.

Visit the Tips and Blog to see what I’m working on.