A "breakpoint" is the specific point where the layout of a website reorganizes based on the screen size or device being used. This breakpoint defines when your design (card, button, or pricing table) adjusts to provide an optimal experience for your users.
💡 For an Affilizz widget, the breakpoint is determined by the block or container that will hold it.
How to find the ideal breakpoint for your widgets?
👉 Let’s take an example from the Affilizz website on this page. In this tutorial, we are using the Google Chrome browser.
Go to the menu "..." in the top-right corner of your browser: "More Tools > Developer Tools."
A developer tools panel will open.
Click the device icon in the top-left corner (refer to the red box in the screenshot) and select responsive mode at the top of the page.
You can now adjust the window size by dragging the handle between the two sections of your browser.
While resizing the window, observe the behavior of the area where you plan to embed the Affilizz widgets. Stop resizing when you notice the website switches to mobile mode.
Once you've determined the size, click the selection icon to the left of the device icon and hover over the area where you will add your widgets.
For example, on the Affilizz blog, we found that the widgets switch to mobile mode at 560 pixels. In practice, this means that as soon as the block or container size is 560 pixels or smaller, the Affilizz widgets will display in mobile mode.
Good to Know:
😇 You can always modify the breakpoint for each of your widgets in the Affilizz Designer to test and adjust as needed.