Container Width

Thoughts 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

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