How to only apply fixed width instead of responsive design in builder.io?

General
1

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?

2

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 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 Visual Editor

Create a Fixed-Width Container

  1. Open the Visual Editor:
  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:

.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:

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    <div style={{ maxWidth: '1440px', margin: '0 auto' }}>
12      {children}
13    </div>
14  );
15 }
  • Step 2: Use the Layout Component in Your Pages

Wrap your page content with the Layout component:

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    <Layout>
15      <RenderBuilderContent model="page" content={content} />
16    </Layout>
17  );
18 }

3. Custom Fields and Styles in Builder Models

You can add 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.
  • 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

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<typeof BuilderComponent>) => {
8  const { content } = props;
9  const containerStyle = {
10    maxWidth: content.data.containerWidth || '1440px',
11    margin: '0 auto',
12  };
13
14  return (
15    <div style={containerStyle}>
16      <BuilderComponent {...props} />
17    </div>
18  );
19 };
20
21 export default RenderBuilderContent;

Conclusion

By combining the fixed-width setting in the Builder.io Visual Editor and applying appropriate styles in your codebase, you ensure consistent design and streamline content management. Use custom fields and components to keep your workflow efficient and aligned with your design requirements. For more detailed best practices, you can always refer to our docs.

1 Like
3

Thank you so much. :heart: :heart: :heart: :heart:

1 Like
4

Hello,
According to me the best practice in Builder.io is to set your page or container to a fixed width of 1440px. To do this, open your project in 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.