How can I customize the responsive design in builder?

General
1

Hello, I can see now builder automatically completes the responsive design when converting the design from figma to code. But how can I customize the responsive design instead of using the default styles?

2

Hey, @SimonZ welcome to the Builder forum.

To customize the responsive design in Builder.io after converting from Figma to code, you can follow these options:

Option 1. Using Breakpoints:

  1. Edit Breakpoints: Navigate to the responsive design view in Builder.io. You can access different breakpoints (e.g., mobile, tablet, desktop) and adjust styles for each. To edit your breakpoints follow the below steps-
  • Go to Settings - Click on your avatar in the top right corner and select Settings.
  • Custom Breakpoints:
    • Under the Breakpoints section, you can define your custom breakpoints.
    • Add breakpoints such as small, medium, large, etc., and define the min-width and max-width properties.
  1. Override Default Styles: In the Styles tab, you can override the default styles for each breakpoint by setting custom values for width, padding, margins, font sizes, etc.

Example: Set Custom Styles for Different Breakpoints

  • Desktop (Default):
1/* Default large screen styles */
2{
3  width: 100%;
4  padding: 20px;
5}
  • Tablet:
    • Select the medium breakpoint:
1/* Styles for medium screens */
2{
3  width: 80%;
4  padding: 15px;
5}
  • Mobile:
    • Select the small breakpoint:
1/* Styles for small screens */
2{
3  width: 100%;
4  padding: 10px;
5}

Option 2. Use Media Queries: For advanced customization, add custom CSS with media queries in the “CSS Properties” section to target specific screen sizes or devices.

Note: Test Across Devices - Use the preview mode to test your custom responsive design across different devices and make adjustments as necessary.

This approach allows you to refine the responsive behavior of your design beyond the defaults provided by the Figma-to-Builder.io conversion. This is our Figma best practices guide. Make sure to check out this as well.