# How to only apply fixed width instead of responsive design in builder.io? **URL:** \ **Category:** General\ **Tags:** visual-editor\ **Created:** [May 19, 2024, 1:33am UTC](https://forum.builder.io/t/how-to-only-apply-fixed-width-instead-of-responsive-design-in-builder-io/5611 "2024-05-19T01:33:12Z")\ **Posts on this page:** 4\ **Page:** 1
**Author:** ![SimonZ](https://avatars.discourse-cdn.com/v4/letter/s/dfb087/32.png) [@SimonZ](https://forum.builder.io/u/SimonZ)\ **Post date:** [May 19, 2024, 1:33am UTC](https://forum.builder.io/t/how-to-only-apply-fixed-width-instead-of-responsive-design-in-builder-io/5611/1 "2024-05-19T01:33:12Z")
If I have a project only using a fixed width like 1440px and don’t need to consider small screens, what is the best practice in [Builder.io](http://Builder.io)? ---
**Author:** ![anon43891756](https://avatars.discourse-cdn.com/v4/letter/a/50afbb/32.png) [@anon43891756](https://forum.builder.io/u/anon43891756)\ **Post date:** [June 5, 2024, 8:46am UTC](https://forum.builder.io/t/how-to-only-apply-fixed-width-instead-of-responsive-design-in-builder-io/5611/2 "2024-06-05T08:46:01Z")
Hi @SimonZ If your project uses a fixed width and you don’t need to accommodate smaller screens, you can streamline your usage of [Builder.io](http://Builder.io) by setting up a fixed width for your design. Here are some best practices and steps to achieve this: ### 1. Set Up Fixed Width in [Builder.io](http://Builder.io) Visual Editor #### Create a Fixed-Width Container 1. **Open the Visual Editor:** - Navigate to your [Builder.io account](https://www.builder.io/login) and open the page or section you want to edit. 1. **Add a Container Block:** - Drag a Box, Section, or any container block from the Insert tab. 1. **Set the Width:** - Click on the container block to select it. - In the Styles tab, set the `width` to `1440px`. - Optionally, you can also center the container by setting `margin-left` and `margin-right` to `auto`. 1. **Apply the Fixed Width Globally:** - If you want to apply the fixed width to all content in your space, consider doing this at the root level of your models or using custom CSS in your stylesheets. ### Example of Styling a Fixed-Width Container In your CSS or inline styles, you might write something like this: ```auto .container { width: 1440px; margin-left: auto; margin-right: auto; } ``` Then, when you add elements in Builder, you can apply the class `container` to the root elements. ### 2. Setting Up the Fixed Width in Your Codebase If you are using a framework like Next.js, you can ensure your components and pages have a fixed width. #### Example using Next.js - **Step 1: Create a Layout Component** Create a `Layout` component to ensure consistent structure and styling: ```auto 1 // components/Layout.tsx 2 import { ReactNode } from 'react'; 3 import { BuilderComponent } from '@builder.io/react'; 4 5 type LayoutProps = { 6 children: ReactNode; 7 }; 8 9 export default function Layout({ children }: LayoutProps) { 10 return ( 11
12 {children} 13
14 ); 15 } ``` - **Step 2: Use the Layout Component in Your Pages** Wrap your page content with the `Layout` component: ```auto 1 // pages/[...page].tsx 2 import Layout from '../components/Layout'; 3 import { RenderBuilderContent } from '../components/builder'; 4 5 // Replace 'YOUR_PUBLIC_API_KEY' with your actual API key 6 builder.init('YOUR_PUBLIC_API_KEY'); 7 8 export default async function Page({ params }) { 9 const content = await builder 10 .get('page', { userAttributes: { urlPath: `/${params.page.join('/')}` } }) 11 .toPromise(); 12 13 return ( 14 15 16 17 ); 18 } ``` ### 3. Custom Fields and Styles in Builder Models You can [add custom fields](https://www.builder.io/c/docs/custom-fields) to your models to ensure all sections or pages adhere to the fixed width. #### Example Custom Field for Width 1. **Add a Custom Field:** - Go to [Models](https://www.builder.io/models). - Edit your Page or Section model. - Add a custom field called `containerWidth` with the default value `1440px`. 1. **Utilize the Custom Field in Content:** - While editing any page or section, set the `containerWidth` as necessary. #### Tailor Content Components ```auto 1 import { BuilderComponent } from '@builder.io/react'; 2 import { ComponentProps } from 'react'; 3 4 // Builder initialization 5 builder.init('YOUR_PUBLIC_API_KEY'); 6 7 const RenderBuilderContent = (props: ComponentProps) => { 8 const { content } = props; 9 const containerStyle = { 10 maxWidth: content.data.containerWidth || '1440px', 11 margin: '0 auto', 12 }; 13 14 return ( 15
16 17
18 ); 19 }; 20 21 export default RenderBuilderContent; ``` ### Conclusion By combining the fixed-width setting in the [Builder.io](http://Builder.io) Visual Editor and applying appropriate styles in your codebase, you ensure consistent design and streamline content management. Use [custom fields](https://www.builder.io/c/docs/custom-fields) and components to keep your workflow efficient and aligned with your design requirements. For more detailed [best practices](https://www.builder.io/c/docs/best-practices), you can always refer to our docs. ---
**Author:** ![SimonZ](https://avatars.discourse-cdn.com/v4/letter/s/dfb087/32.png) [@SimonZ](https://forum.builder.io/u/SimonZ)\ **Post date:** [June 5, 2024, 9:39pm UTC](https://forum.builder.io/t/how-to-only-apply-fixed-width-instead-of-responsive-design-in-builder-io/5611/3 "2024-06-05T21:39:55Z")
Thank you so much. ❤ ❤ ❤ ❤ ---
**Author:** ![felicityhughes](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/felicityhughes/32/3905_2.png) [@felicityhughes](https://forum.builder.io/u/felicityhughes)\ **Post date:** [June 24, 2024, 7:28am UTC](https://forum.builder.io/t/how-to-only-apply-fixed-width-instead-of-responsive-design-in-builder-io/5611/4 "2024-06-24T07:28:48Z")
Hello, According to me the best practice in [Builder.io](http://Builder.io) is to set your page or container to a fixed width of 1440px. To do this, open your project in [Builder.io](http://Builder.io), select the relevant container or page settings, and set the width to 1440px. It is responsive design settings are disabled or set the viewport to only consider the fixed width.