CSS Shorthand Units and Suffixes

For those of you who are starting to learn CSS, you may not be aware of Shorthand Properties which will be used in certain fields of your Zoey store. Here are some common shorthands we will be using!

Note: Our support team is unable to troubleshoot issues with custom CSS you have added. Please use this information and the CSS editing areas at your discretion.

Units and Suffixes

The main suffixes you will be using and should be aware of are the ones used for measurements. Here are the most common ones:

Relative Measurements
These units will be based on other properties. These can be CSS properties such as Font, or they can be the size of the browser or container the item is viewed in.  

• %
  Percentage of the container this element is in. We recommend this unit as the best for maintaining a responsive site design.
  50% will make the element take up 50% of the page
• em
  Measurement based on the Font Size.
  .5em will make the element half as tall as my font (if you have font-size: 20px; this will be 10px tall)

Static Measurements
These units are all defined sizes and will stay that size regardless of the container they are placed in. This may cause issues with responsive site behavior as the size will be the same if it's on a desktop or a mobile device. 

• px
  Short for Pixels- the smallest addressable element in an image and the standard form of measurement for digital media.  
  3px will make the element 3 pixels tall
• pt
  Short for Point- generally used in fonts, but is ultimately a measurement.
  10pt will make the element 10 points tall 
  
• cm, mm or in
  These units are all based on standard physical measurements- centimeters, millimeters or inches 

There are other suffixes that are possible to use, but the above ones are listed as the most widely support across all major browsers. 

Learn More

As noted before, our team is limited in the support we can offer for custom CSS changes. If you are not comfortable with making CSS changes and troubleshooting them yourself, we recommend contacting one of our Agency Partners. 

• More Advanced Design Tool Tutorials