Skip to main content
All CollectionsCreate a Webinar
Create a Webinar: Interface Builder: Breakpoints
Create a Webinar: Interface Builder: Breakpoints
Updated over 2 months ago

Ever wonder how your meticulously crafted webinar interface looks on different devices? With webinar.net's innovative Breakpoint feature, you can optimize the viewing experience for your audience, regardless of whether they're joining from a desktop, tablet, or mobile phone.

Why Use Breakpoints in the Interface Builder?

In simpler terms, breakpoints are designated points where the layout of your webinar interface adjusts to accommodate different screen sizes. Here's why you should consider using them:

  • Enhanced User Experience: Ensure your audience enjoys a smooth and intuitive experience on any device, be it a desktop computer, tablet, or smartphone. Nobody likes squinting or pinching to navigate a cluttered interface!

  • Boosted Engagement: A responsive interface adapts to the user's viewing preference, maximizing screen real estate and minimizing distractions. This translates to better engagement and allows your audience to focus on your content.

  • Professional Presentation: A well-designed responsive interface exudes professionalism and attention to detail, leaving a positive impression on your attendees.

Building the Responsive Interface

  • Click the Breakpoints option and select Add Breakpoint.

  • The Add Breakpoint window will pop out and you will be prompted to specify the dimensions in pixels.

Here are some of the most common screen resolutions (pixels):

  • Desktop: 1920×1080, 1366×768, 1280×1024, 1024×768

  • Mobile: 375×667, 414×736, 360×800, 390×844

  • Tablet: 768×1024, 1024×768, 601×962

  • Rearrange the components by selecting and dragging them to your desired position. Click and drag the little white boxes at the edge to manually resize the components.

    • Hide Dock - populate the checkbox to hide the components dock. Once the dock is hidden, the Available Components option will appear and you can select what components will be shown.

    • Hide Header - populate the checkbox to hide the header within that specific breakpoint.

  • You can edit your custom breakpoints by clicking on the pen icon to the right of the dimensions.


    Click the trash can icon to delete the breakpoint.

By mastering breakpoints in the Interface Builder, you can ensure your webinar delivers a flawless and engaging experience – no matter what device your audience chooses to attend from. So, embrace the power of responsive design and get ready to impress your viewers with a webinar that adapts and shines on any screen!


For further assistance, contact us through chat or send us an email at support@webinar.net.

Did this answer your question?