Resize Mode

4 MIN READ

Summary: Get familiar with the available resizing options.


Table of Contents

  1. Initial Size
  2. Allow Scale Down
  3. Fixed
  4. Fixed Height
  5. Fill Width
  6. Fill



1. Initial Size

To illustrate how widgets scale, we'll use this example. We'll take this widget through every resize mode we offer and see how it scales. This works on desktop and mobile devices. Experiment by resizing your browser, or changing the orientation of your device after you embed a widget. Resizing will keep your content consistent and won't apply any stretching.

Initial Size

back up ↑


2. Allow Scale Down

The widget will scale down when resizing the container. The widget will not go above it’s initial size if the container is larger.


NOTE

When scaled, the widget keeps it's aspect ratio. For example, if the width is scaled down by 50%, so is the height.

back up ↑


3. Fixed

The widget will be cropped when resizing the container. The widget won’t scale.

back up ↑


4. Fixed Height

The widget will scale to 100% of the container’s width, keeping the height fixed.


NOTE

This is useful for widgets that need to spread across the entire width of the container, like a strip of photos or a newsfeed.

back up ↑


5. Fill Width

The widget will scale to 100% of the container’s width and the height will keep the aspect ratio. This means that in most cases, part of the widget will be cropped. Enable Autoscale to solve this problem.

back up ↑


6. Fill

The widget will scale to 100% of the container’s width and height. This works great for widgets that need to run in the background, like fullscreen galleries.

back up ↑

Further Reading

  • Autoscale - Learn how autoscale works.
  • FAQs - Frequently asked questions, answered.

Have more questions? Contact a human at support@widgetic.com.

Last updated on 10th Apr 2017