After publishing my website online, the sidebar and margin width is not correct

[CDucloux]

Description

Description of the issue

Whenever I'm publishing my website (whether it is on Netlify or Quarto Pub), I get the following issue on all pages :

• The margin and sidebar width is far too large (image below)

See also : https://corentin-ducloux.netlify.app/

However, in my _quarto.yml, the following is set :

format:
  html:
    grid:
      sidebar-width: 0px
      body-width: 1200px
      margin-width: 200px
      gutter-width: 1.5rem

Also, when rendering on local, the website format is such as set in the grid.

Am I missing something here ? I use a Github Action to publish my website when I commit on develop / main

Here is my repository : https://github.com/CDucloux/Quarto_Website

Notes

Edit : Interestingly enough, manually publishing the website via quarto publish netlify works well, but using the Github Action is what creates the sidebar and margin width error

Additional infos

• Quarto v1.5.57

[cderv]

I can't see much differences between rendering your website locally and the one published.

Regarding grid sizing, this is some calculation made for the CSS. You can check the value of the grid in your Browser developer mode. Example

If I keep increasing body-width then the margins on the side will reduce.

So I think you just need to keep playing with the values so that the size is what you want.

Don't forget how this grid system works:

• Usually you set a max value
• This values then adapt based on screen and its resolution / available space.

This means you need to compare your local and deployed version on the same screen. You can also check the value using browser console to check that your deployed version correctly has the desired values.

Hope it helps

[CDucloux]

I made an edit in my previous post where I stated that manually publishing the website via quarto publish netlify, which I did like ~ 20 minutes ago, worked well.

Actually, deploying using a Github Action seems to be the problem (the grid system doesnt work properly then).

[cderv]

It should lead to the same result. quarto publish is called in both cases I believe.

Difference between local and github action could be present if somehow you have some things in your repo, not commited and that creates a different state.

Otherwise, I don't see what could lead to some difference regarding the CSS grid configuration between deploying quarto publish locally, and quarto publish in Github action 🤔