May 29, 2023

How to add custom breakpoint in Breakdance

Play Video

What is the tutorial about?

This tutorial is all about adding a custom breakpoint in Breakdance, a popular tool for designing responsive websites. The tutorial provides a step-by-step guide on how to set up a custom breakpoint, specifically for large devices. This is an essential skill for anyone looking to create websites that look great on all devices, regardless of their screen size.

Tutorial Steps

  1. Open the Breakdance preferences:
    Click on the “…” menu, open preferences, and then go to breakpoints.
  2. Add a custom breakpoint:
    Click on “Add Breakpoint”. Name it as per your preference, for instance, “Large Devices”.
  3. Set the minimum and maximum widths:
    Click on the newly created breakpoint and set the minimum width. In this tutorial, the minimum width is set to 1600 pixels, meaning the breakpoint will apply to all devices above 1600 pixels. The maximum width is left blank, which means the breakpoint will apply regardless of how large the device is.
  4. Set the default preview width:
    Enter a custom preview width. This tutorial uses 1800 pixels. This allows Breakdance to scale the design down so you can see it on your smaller screen as if it was an 1800 pixel screen.
  5. Save the breakpoint:
    Click on “Save” to save the breakpoint.
  6. Create styles for large devices:
    Go to your design properties and adjust the font size for large devices. In this tutorial, the font size is set to 100 pixels for large devices and 76 pixels for desktop and below.
  7. Preview the design on large devices:
    Click on the breakpoints dropdown and choose your custom breakpoint to preview the design on large devices.

Use Cases for this Tutorial

  • Web Designers:
    This tutorial is beneficial for web designers looking to create responsive designs for various devices, especially larger screens.
  • Bloggers and Content Creators:
    Bloggers and content creators can use this tutorial to ensure their website is visually appealing and user-friendly on all devices.
  • Business Owners:
    Business owners can use this tutorial to optimize their website for all devices, providing a better user experience for their customers.

Required Resources

Breakdance Builder Logo
Free Options
Credit to Breakdance
The Breakdance YouTube channel serves as a practical resource for users of their WordPress website builder. It features in-depth tutorials, where they demonstrate the process of creating a website from the ground up. The channel emphasizes hands-on learning, making it an essential tool for both beginners and experienced users aiming to maximize the capabilities of the Breakdance platform.
How to add custom breakpoint in Breakdance
Welcome back!
Enter your Helwp credentials to sign in.

No Account yet? Sign Up

My Account
Give Feedback
Describe your feedback *
Rate Helwp
Problem *
Describe the problem
Want us to reply?
Your E-Mail
Affiliate Disclosure

At Helwp, we’re committed to transparency and honesty. Therefore, we want to inform you that some of the links on our website are affiliate links. This means that, at no additional cost to you, we may earn a small commission if you click through and make a purchase.

We only promote products or services that we genuinely believe in. These affiliate commissions help us to maintain the website and continue to provide you with free, high-quality WordPress content.

If you are interested in how you can support us even further, check out our support page.