The styling is different in local development versus published to Github Pages.

[thegilpatrick]

Description

Here is my Blog's repository.

This is my local development view with quarto preview. Quarto Version 1.4.176

As you can see the blog listings are centered on the page.

Below is a picture of my email newsletter form in local development. It has a gray button and it is centered.

Below is the view when you go to my blog hosted on Github Pages with the same QMD and CSS files. It is off center to the left.

Below is the picture of my email newsletter form it is off center to the left and the button is white and off in alignment with the text box.

I am not sure what is going on here.

[cscheid]

You could try inspecting the elements in the developer tools of your browser, specifically to look at the list of computed styles.

[thegilpatrick]

Thank you! This fixes my email subscription input form.

But somehow the alignment of the page is still off to the left? When I inspect it with my mouse it looks like when it is published to Github Pages it has extra margins to the right?

Below is the local version.

[cscheid]

@jjallaire I think our preview server is doing something wonky here. I can't quite figure out what's happening, but I do see different layouts when running under quarto preview vs. running quarto render and looking at the files from a static local server.

@thegilpatrick with that said, when I run your site through a local static server (such as python -m http.server), then I see the "wrong" alignment on the columns, same as what's on https://thegilpatrick.com/.

[jjallaire]

The lack of an https prefix on the script will result in it using http, perhaps add the https prefix?

[dragonstyle]

I think that the issue is that the 'grid' isn't a per page option - there is a shared grid for the entire website. When it is placed on a page like this and served with the preview server, the local, individual page render will override the grid and appear fine in the preview (it's basically 'last page wins'). When rendered or deployed, however, it will use a shared grid definition provided by the site (from the website key).

If you have other pages that use the grid layout (and so don't want to set the sizes globally to 0px), you can use article layout to position the listing across the columns, like:

---
title: The Gilpatrick
listing:
  id: posts
  page-size: 6
  contents: posts
  sort: "date desc"
  type: grid
  categories: true
  sort-ui: true
  filter-ui: true
  feed: true
  fields: [image, date, title, author, description, categories, reading-time]
format:
  html:
    css: no-title.css
---

:::{#posts .column-page-inset}

:::

(more about available options herehttps://quarto.org/docs/authoring/article-layout.html#overflowing-content).

Alternatively, you could move that grid definition under your website key in _quarto.yml and it will control the grid for the whole website.

HTH

[dragonstyle]

Note - this is made complicated by the fact that the grid is allowed in a standalone HTML page (above I said it wasn't allowed per page, but it really isn't allowed per page of a website or book), it's just that in the case of a website or blog, it will ultimately use the grid defined by the containing site.

[thegilpatrick]

Hey @dragonstyle when I change the grid layout in the website key in _quarto.yml it messes with my table of contents in my left margin of my blog posts.
Here is an example:

I tried your suggestion for index.qmd and it is still not centering the grid?

---
title: The Gilpatrick
listing:
  page-size: 6
  contents: posts
  sort: "date desc"
  type: grid
  categories: true
  sort-ui: true
  filter-ui: true
  feed: true
  fields: [image, date, title, author, description, categories, reading-time]
page-layout: full
format:
  html:
    css: no-title.css
---

:::{#posts .column-page-inset}

:::

Produces this:

[thegilpatrick]

I changed the index.qmd to

---
title: The Gilpatrick
listing:
  page-size: 6
  contents: posts
  sort: "date desc"
  type: grid
  categories: false
  sort-ui: true
  filter-ui: true
  feed: true
  fields: [image, date, title, author, description, categories, reading-time]
page-layout: article
format:
  html:
    css: no-title.css
---

:::{#posts .column-page-inset}

:::

and it worked. Basically just had to do categories: false to get rid of the sidebar I was hiding in the css.