Edge Locking

How the Edge Locking for elements works in Showit

Jason Lackey avatar
Written by Jason Lackey
Updated this week

Edge Locking is a design feature that allows you to lock an element (such as a shape, text box, image, or icon) to one or more edges of the browser window. There are two types of Edge Locking: Horizontal and Vertical.

Horizontal Edge Locking


Using this feature you are able to lock an element to the edge of the desktop view of your site. Horizontal Edge Locking gives you three options for how an element will lock to the edge of the desktop view.

Note: Horizontal Edge Locking is only available in the Desktop design view. Based on the Responsive Canvas scaling engine, it is irrelevant for Mobile design.

  1. Left or Right: Lock an element to the right or left edge, maintaining the element’s dimensions.

  2. Stretch Left or Stretch Right: Stretch an element from it’s existing location to the right or left edge. For example, if an element is set to Stretch Left, its left side will stay locked to the left edge of the window while its right side will stay where it was originally designed on the canvas.

  3. Stretch: The left and right sides of the element will stay locked to the left and right sides of the browser window as the window grows.

Vertical Edge Locking


Using this feature you are able to lock an element to the top or bottom of a canvas on desktop and/or mobile.

Note: Vertical Edge Locking is only available for elements in Canvases that have the Canvas Type set to “Window Height” or “Grow with Content.”

  1. Top or Bottom: Lock an element to the top or bottom edge of the Canvas, maintaining the element’s dimensions.

  2. Stretch Top or Stretch Bottom: Stretch an element from it’s existing location to the top or bottom of the canvas. For example, if an element is set to Stretch Top, its top side will stay locked to the top edge of the Canvas (not the window) while its bottom side will stay where it was originally designed on the canvas.

  3. Stretch: The top and bottom sides of the element will stay locked to the top and bottom sides of the Canvas (not the window) as the Canvas grows.

Did this answer your question?