Container Width

Scope 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

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