So excited to introduce our newest setting: Breakpoints! 🎉 Now you can customize how the widget adapts to different devices and screen sizes for a seamless responsive design.

In this article, we will show you just that, steps on how to enable and use the custom breakpoints for your widget.

We have released two available options:

1. Page width is taken from the parent page - This option ensures that the width of your embedded page or content dynamically matches the width of the parent container or page where it is placed. It provides a seamless integration, making your embedded content look natural and aligned with the overall layout of the parent page.

In order to enable this option you must select the 'Feed' layout. In order to select the Feed layout:

1. Navigate to the 'Layout' and choose 'Feed':

2. Under 'General settings' enable 'Get width from parent page':

That's it!

2. Add custom breakpoints - Set your own screen sizes to control how your widget adjusts on different devices, giving you more flexibility for your design.

In order to activate this option, you will need to:

1. Navigate to the 'Layout' and choose 'Feed':

and Choose any other card, but not the 'Media card', and either enable the 'Products' option under the 'Card' tab or disable 'Equal card height' under the 'Card' tab:

or you can enable this setting and still use the 'Media card' if 'Products' is enabled and if the image shape is 'Fit to original'.

To select the 'Media card' click on 'Cards' and select the 3rd option:

Then enable 'Products' under card elements:

and choose 'Fit to original' under image shape:

2. Then the option to enable 'Custom breakpoints' will appear under the 'Layout tab':

That's it! Now you will be able to set your own screen sizes.