How can I increase the blog content width in Craft theme?

Topic summary

Goal: widen the blog article content area in the Craft theme without changing the title or featured image.

What was tried:

  • Adding a new CSS rule for a .blog-content-container selector in Assets > base.css. OP reports no visible change (likely not the correct selector for Craft’s blog template).

Proposed solutions (all via Online Store > Themes > Edit code > Assets > base.css):

  • Adjust template containers used by Craft: .page-width–narrow and #bloggy–article, setting larger max-width values (e.g., 100–130rem) or full width (100%).
  • Optionally include .article-template__hero-container to control the hero container width.
  • Use a desktop-only CSS media query (e.g., min-width ≈ 990–1024px) to scope changes to larger screens and avoid affecting mobile.

Latest update/outcomes:

  • Another user confirms success using the #bloggy–article and .page-width–narrow approach, but notes it also changed the layout on mobile. They request guidance to keep mobile wide while desktop is narrower.

Status:

  • OP has not confirmed a final fix. A key open item is applying the width increase only on desktop via media queries (CSS rules that target specific screen sizes). An attached screenshot was shared; core understanding relies on the CSS selectors mentioned.
Summarized with AI on January 1. AI used: gpt-5.

I don’t write any code, but I am comfortable following directions and reverting everything if it doesn’t work out. :wink: Although I don’t usually tend to make changes that are too complicated - usually just sticking in a few lines here or there.