# How can I customize the responsive design in builder?

**URL:** <https://forum.builder.io/t/how-can-i-customize-the-responsive-design-in-builder/6267>\
**Category:** General\
**Created:** [August 26, 2024, 7:44pm UTC](https://forum.builder.io/t/how-can-i-customize-the-responsive-design-in-builder/6267 "2024-08-26T19:44:08Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![SimonZ](https://avatars.discourse-cdn.com/v4/letter/s/dfb087/32.png) [@SimonZ](https://forum.builder.io/u/SimonZ)\
**Post date:** [August 26, 2024, 7:44pm UTC](https://forum.builder.io/t/how-can-i-customize-the-responsive-design-in-builder/6267/1 "2024-08-26T19:44:08Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![sheema](https://avatars.discourse-cdn.com/v4/letter/s/e19adc/32.png) [@sheema](https://forum.builder.io/u/sheema)\
**Post date:** [August 27, 2024, 9:37am UTC](https://forum.builder.io/t/how-can-i-customize-the-responsive-design-in-builder/6267/2 "2024-08-27T09:37:59Z")

</div>

Hey, @SimonZ welcome to the Builder forum.

To customize the responsive design in [Builder.io](http://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](http://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)**:

```auto
1/* Default large screen styles */
2{
3 width: 100%;
4 padding: 20px;
5}

```

- **Tablet** :
  - Select the `medium` breakpoint:

```auto
1/* Styles for medium screens */
2{
3 width: 80%;
4 padding: 15px;
5}

```

- **Mobile** :
  - Select the `small` breakpoint:

```auto
1/* Styles for small screens */
2{
3 width: 100%;
4 padding: 10px;
5}

```

**Option 2. Use Media Queries** : For advanced customization, add [custom CSS](https://www.builder.io/c/docs/guides/custom-code#editing-custom-java-script-and-css) with media queries in the “CSS Properties” section to target specific screen sizes or devices.

**Note** : Test Across Devices - Use the [preview mode](https://www.builder.io/c/docs/guides/preview-url#editing-and-previewing-your-site) 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](http://Figma-to-Builder.io) conversion. This is our [Figma best practices](https://www.builder.io/c/docs/figma-best-practices) guide. Make sure to check out this as well.