Increase width of guide page when using astro starlight?

[upper jacinth]

I'm trying to figure out what the easiest way to increase the width of a guide page is. I'm using the Starlight theme by Astro and am new to Astro.

[vale marsh]

Hi @upper jacinth. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

You can increase the width of a guide page in Astro's Starlight theme by providing additional CSS files to modify or extend Starlight’s default styles. Here are the steps:

1. Add a CSS file to your src/ directory. For example, you could set a wider default column width like this:

:root {  
  --sl-content-width: 50rem;  
}

This code should be placed in a file like src/styles/custom.css.

2. Add the path to your CSS file to Starlight’s customCss array in astro.config.mjs:

import { defineConfig } from 'astro/config';
import starlight from '@astrojs/starlight';

export default defineConfig({
  integrations: [
    starlight({
      title: 'Docs With Custom CSS',
      customCss: [
        // Relative path to your custom CSS file
        './src/styles/custom.css',
      ],
    }),
  ],
});

You can see all the CSS custom properties used by Starlight that you can set to customize your site in the props.css file on GitHub (https://github.com/withastro/starlight/blob/main/packages/starlight/style/props.css).

For more information, refer to the Starlight CSS & Styling Guide (https://starlight.astro.build/guides/css-and-tailwind/#_top).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: