How to Set Max-Width in Gutenberg for WordPress Themes: A Comprehensive Guide

When transitioning a non-WordPress theme to a Gutenberg block theme, ensuring a responsive and aesthetically pleasing layout is crucial. To achieve a group width of 100% with a maximum width of 630px in Gutenberg, you’ll need to apply some custom CSS. Follow these steps to implement the desired styling:

1. Access the Gutenberg Editor

Navigate to the WordPress dashboard and open the post or page where you are working with the Gutenberg editor.

2. Add a Custom HTML Block

Inside the Gutenberg editor, add a Custom HTML block. This block allows you to insert and customize HTML code within your content.

3. Insert the CSS Code

Within the Custom HTML block, insert the following CSS code to define the width and max-width properties:

css Code

<style>
  .your-group-class {
    width: 100%;
    max-width: 630px;
    /* Additional styling if needed */
    margin: 0 auto; /* Center the group horizontally */
    padding: 20px; /* Add padding for better readability */
  }
</style>

Replace .your-group-class with the actual class or selector of the HTML element you want to style. This code ensures that the specified group maintains a width of 100% but won’t exceed 630px in width.

4. Adjusting Your HTML Structure

Make sure that the HTML structure of your content reflects the use of the specified class or selector. For example:

html code

<div class="your-group-class">
  <!-- Your content goes here -->
</div>

5. Preview and Adjust

Preview your changes in the Gutenberg editor to ensure the styling meets your expectations. If necessary, you can fine-tune the CSS properties or adjust the HTML structure accordingly.

6. Save and Publish

Once satisfied with the layout, save your changes and publish your post or page.

By following these steps, you’ll successfully set a group’s width to 100% with a maximum width of 630px in Gutenberg. This approach ensures a responsive design, adapting to various screen sizes while maintaining a visually appealing layout.

Remember to adapt the CSS class and HTML structure based on your specific theme and content.

Note: Always perform these changes in a staging environment or create a backup to avoid any undesired impacts on your live website.

Feel free to explore further customization options based on your design preferences and the overall aesthetic of your WordPress theme.

Was this helpful?

Thanks for your feedback!