Gantry/Hydrogen: How to make blog responsive

Support Gantry
6

@arnohoitink, Well, there is some crossover here, since the theme (g5_Hydrogen) you are using is build by the same developers who build Grav… And there are a handful of Grav users on this forum that also use the same theme.

Anyway, the issue is nor CMS, nor theme related. It is a pure css/scss related issue.

The number of columns is defined by the following wrapper:

<div class="grid-3">
...
</div>

which is styled with the following scss (see templates/g5_hydrogen/custom/scss/custom.scss, line 109):

.grid-3 {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 1rem;
}

You can make the number of columns responsive by adding 1 or more media queries, which direct the browser to add/remove styling depending on the width of the screen.

// Use 2 columns when screen is max 1000px wide
@media (max-width: 1000px) {
  .grid-3 {
     display: grid;
     grid-template-columns: repeat(2, minmax(0, 1fr));
     gap: 1rem;
  }
}

// Use 1 column when screen is max 600px wide
@media (max-width: 600px) {
  .grid-3 {
     display: grid;
     grid-template-columns: repeat(1, minmax(0, 1fr));
     gap: 1rem;
  }
}

You will have to adapt the widths to suit your needs.

Unfortunately, I don’t know Gantry so I cannot tell you how to add the media queries. You might want to ask that in the Gantry forum. Unless you are lucky and one of the few Gantry users here comes by…