Gantry/Hydrogen: How to make blog responsive

Support Gantry
1

HI,

I am using Articles Anywhere from Regular labs, with that tool I can set up a blog with ordering based on Joomla fields.
The blog contains 3 articles next to each other and that stays that way when a change the browser size. I want to limit the article-blog to one article per line when I reduce the browser size for smartphone.

This is the coding (Articles Anywhere) I use in my Joomla article:

 
{article Home }
[text]
{/article}

{articles category="Activiteiten" datum=">date('today')" ordering="datum ASC" per_page="3"  }

{if first}

{/if}

[title]

[image-1]

[category]

[datum format="j F Y"]

[readmore]

{if last}

{/if}

{/articles}

 

See screendumps:
screen 1: my full page browser
screen 2: shrinked browser with non responsive articles
screen 3: This is how I want the smartphone layout to be.

Can anybody help me with this?

Thanks, Arno.

screen dumps
screen dumps1099×2294 294 KB

3

Is this a Grav website?

4

I am sorry, I don’t know what Grav is. My website is in Joomla

5

Grav is a CMS. You are posting a question in a Grav forum. You’d have better luck finding a forum devoted to the tools you are using (Joomla and/or Articles Anywhere).

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…

7

Thank you so much, this helped me to make my site responsive.
Just a quick question, how were you able to see my custom scss?

Thanks anyway.

Regards, Arno

8

@arnohoitink, I googled a few words from the image your shared and found the website. The source of styles is then revealed in the Devtools console of the browser.

The scss files are probably compiled into *.css.map files. The browser will then show the origin of the css.