Container Width

OnFlow theme is designed with a focused reading experience in mind, using a narrow container width by default. However, you can easily customize these widths to better suit your needs.

Default Settings

The theme uses two container widths:

• Regular container (--container--width): 500px
• Wide container (--container-wide--width): 800px

The regular container is used for most content, while the wide container is applied to certain elements like images and galleries for better visual impact.

Customizing Container Width

To modify these widths, you’ll need to add custom CSS code.

<style>
  body {
    /* Increase regular container width to 600px */
    --container--width: 600px;
 
    /* Increase wide container width to 1000px */
    --container-wide--width: 1000px;
  }
</style>

You can adjust these values to any width that works for your content. Just remember to maintain a reasonable reading width for optimal user experience.

Tips

• Keep readability in mind - extremely wide containers can make text harder to read
• Test your changes across different screen sizes
• The wide container should typically be larger than the regular container
• Use pixels (px) for precise control