Community guidelines

Please keep discussions civil and on-topic. Repeated violations may lead to a temporary ban.

Gantry

Gantry/Hydrogen: How to make blog responsive

Started by Arno 5 years ago · 6 replies · 990 views

5 years ago

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:

<div class="row-fluid">
<div> </div>
<div>{article Home }</div>
<div>[text]<br />{/article}</div>
<p>{articles category="Activiteiten" datum=">date('today')" ordering="datum ASC" per_page="3" }</p>
<p>{if first}</p>
<div class="grid-3">
<p>{/if}</p>
<div class="panel">
<h4>[title]</h4>
<p>[image-1]</p>
<h4>[category]</h4>
<h4>[datum format="j F Y"]</h4>
<p>[readmore]</p>
</div>
<p>{if last}</p>
</div>
<p>{/if}</p>
<p>{/articles}</p>
<p> </p>
</div>

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|239x500

5 years ago

Is this a Grav website?

5 years ago

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

5 years ago

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).

pamtbaau

Grav Forum Moderators Legend First Post Conversation Starter Well Liked 3127 posts

5 years ago Solution

@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:

HTML

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

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

CSS

.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.

CSS

// 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...

5 years ago

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

pamtbaau

Grav Forum Moderators Legend First Post Conversation Starter Well Liked 3127 posts

5 years ago

@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.

Topic	Replies	Views	Activity
Skeleton for Helium / Hydrogen Gantry · by Chris, 11 months ago	1	171	11 months ago
Gantry 5: How to change the Theme logo? Gantry · by Sam, 1 year ago	7	220	1 year ago
Unable to display Comments plugin in Gantry 5 Helium theme Gantry · by Dima, 2 years ago	2	74	2 years ago
How to add comment in gantry5 theme Gantry · by KimTaeWoong, 9 years ago	2	1882	3 years ago
Critical message Gantry · by stani, 6 years ago	2	829	3 years ago

Suggested topics