Breakpoint Variants

This training video will walk you through how to make your Experiences responsive by using our Variants functionality. Note: by default, your Experiences will always be elastic, and scale up/down to fit any screen size, but we recommend using Variants as a best practice, because those will offer a more responsive/adaptive approach to your content.

Variants in Creator Studio can be built at many different sizes, however, we do have some best practices around what sizes you might want to build your mobile, tablet and desktop Variants at if you are not sure where to start:

-Mobile variant sizing: about 400-500 pixels wide
-Tablet variant sizing: about 768-992 pixels wide
-Desktop variant sizing: ideally, this should match the maximum width that your website is able to achieve. As a best practice however, we do not suggest going any larger than 1920 pixels wide.

Then in regards to the heights of your Variants, it is really up to you in terms of how tall you want to make them, but we always like to remind users to be wary of the fact that the taller your Experience is, the more scrolling that will create for your customers. So just be mindful of the fact that you won't want to drive people away with too much scrolling!

Lastly, your website may have breakpoints of its own that you will want to adhere to when building out your Variants in Creator Studio. You can change your Experience's breakpoints in your account's settings, then build Variants at widths that coincide with those breakpoints.

This video is part of a playlist of training materials that we have created, and you can click here to watch the rest of those videos if you'd like! Feel free to contact our support team at support@getfastr.com with any questions on the content in these videos as well.