Container Width

This guide applies to Scope, Thoughts, Feed, Moment, Aspect, OnFlow, Thesis, and Format.

Scope

The theme features a spacious split-screen layout with a sidebar and content area. The theme’s default widths are carefully chosen to provide comfortable reading.

Default Settings

The theme uses the following container widths (CSS variables) by default:


--container-small--width: 800px;
--container-medium--width: 1040px;
--container-wide--width: 1400px;

These values are used across the theme for different layout densities.

Customizing Width

Code Injection is required to add custom CSS.

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


<style>
  body {
    --container-small--width: 800px;
    --container-medium--width: 1040px;
    --container-wide--width: 1400px;
  }
</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

Thoughts

The theme features a split layout design with customizable container widths. The left side displays simple information like post titles, excerpts, author avatars, names, and descriptions. The right side contains your main content. The theme’s default widths are carefully chosen to create a balanced layout with comfortable reading.

Default Settings

The theme uses two main width variables:

Container width (--container--width): 600px
Small container width (--container-small--width): 460px

The container width controls the right side where your main content appears, while the small container width controls the left side where simple information is displayed.

Customizing Width

Code Injection is required to add custom CSS.

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


<style>
  body {
    /* Adjust main content area width (right side) */
    --container--width: 700px;
 
    /* Adjust info area width (left side) */
    --container-small--width: 500px;
  }
</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 content areas can make text harder to read
Test your changes across different screen sizes to ensure the split layout works well
Maintain a good balance between the left info area and right content area
Use pixels (px) for precise control

Feed

The theme features a flexible layout with customizable content and sidebar widths. The theme’s default widths are carefully chosen to provide comfortable reading while maintaining properly sized navigation and widget areas.

Default Settings

The theme uses three main width variables:

Content area (--layout--content--width): 640px
Navigation sidebar (--layout--sidebar-navigation--width): 240px
Widgets sidebar (--layout--sidebar-widgets--width): 360px

The content area controls the width of your main content, the navigation sidebar determines the size of your site navigation, and the widgets sidebar controls the width of the sidebar containing widgets and additional content.

Customizing Width

Code Injection is required to add custom CSS.

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


<style>
  body {
    /* Increase content area width to 720px */
    --layout--content--width: 720px;
    
    /* Adjust navigation sidebar width to 220px */
    --layout--sidebar-navigation--width: 220px;
 
    /* Adjust widgets sidebar width to 340px */
    --layout--sidebar-widgets--width: 340px;
  }
</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 content areas can make text harder to read
Test your changes across different screen sizes
Ensure sidebar widths are appropriate for your navigation and widget content
Use pixels (px) for precise control

Moment

The theme features a spacious layout with a posts sidebar and wider content area. The theme’s default widths are carefully chosen to provide comfortable reading while maintaining a prominent posts sidebar.

Default Settings

The theme uses two container widths:

Regular container (--container--width): 700px
Narrow container (--container-narrow--width): 500px
Wide container (--container-wide--width): 1100px
Gallery container (--gallery--width): value from --container-wide--width

The regular container is used for the main content, the wide container accommodates full-width elements like images and galleries, and the posts sidebar width controls the size of the adjacent posts list.

Customizing Width

Code Injection is required to add custom CSS.

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


<style>
  body {
    /* Increase regular content width to 800px */
    --container--width: 800px;
    
    /* Increase wide container width to 1200px */
    --container-wide--width: 1200px;
  }
</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

Aspect

Default Settings

The theme uses two container widths:

Regular container (--container--width): 700px
Wide container (--container-wide--width): 1100px
Posts sidebar (--post--sidebar--width): 320px

Customizing Width

Code Injection is required to add custom CSS.

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


<style>
  body {
    /* Increase regular content width to 800px */
    --container--width: 800px;
    
    /* Increase wide container width to 1200px */
    --container-wide--width: 1200px;
 
    /* Decrease sidebar width to 300px */
    --post--sidebar--width: 300px;
  }
</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

OnFlow

The 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

Code Injection is required to add custom CSS.

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

Thesis

The theme features a unique three-column layout with navigation and posts list sidebars. The main content area is purposefully designed with a moderate width to create a balanced reading experience alongside the sidebars.

Default Settings

The theme uses two container widths:

Regular container (--container--width): 580px
Wide container (--container-wide--width): 780px

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

Code Injection is required to add custom CSS.

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


<style>
  body {
    /* Increase regular container width to 640px */
    --container--width: 640px;
 
    /* Increase wide container width to 840px */
    --container-wide--width: 840px;
  }
</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

Format

The 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): 440px
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

Code Injection is required to add custom CSS.

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


<style>
  body {
    /* Increase regular container width to 520px */
    --container--width: 520px;
 
    /* Increase wide container width to 920px */
    --container-wide--width: 920px;
  }
</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