Return to Question

replaced http://joomla.stackexchange.com/ with https://joomla.stackexchange.com/

edited Apr 13, 2017 at 12:50

1

I use the category blog layout and override it to wrap a link around the article intro-image, which points to the article.

Now i want to achieve a responsive image grid positioning like you can see here here. This could be achieved by using CSS.

But i don't know which CSS file i have to edit or how to get it working.

Somebody know how to achieve this and also a tip about what the CSS class(es) should look like?

I use Joomla 3.3.6 and the Afterburner2 template with Gantry framework.

Thanks for the solutions...(I would rate it but I have not enough reps) After I read them iI tried again and realized that I could change the column count in the settings of the menu item. This appears to me much more intuitive than making an override for the whole blog.php. I mean if I write the count of columns static in blog.php it is very inflexible!?

With that approach I had the problem that the intro text was always shown. Also when I set the option "Show intro text" in article or in menu to "hide". So i set the "more" at the beginning of the article and after that the text of the article. "Show read more" i also set to hide. So on my site with the category blog i only see images. One row with 4 images.

But then I get another problems:

I could not change the spacing between the images, because i want to make it a bit smaller.
If I reduce the width of the page so that only two images are displayed in one row, they are not exactly side by side. The right one is a bit under the left one.

First I thought that is the correct way I used, but after a while I was unsure again.

Can this be a good way (save it with a CSS override or something) or should I start again with another approach for example, edit the blog.php (at beginning I wanted to edit it, but then I don't how to change the part in blog.php to a 3- or 4-column layout)!?

I use the category blog layout and override it to wrap a link around the article intro-image, which points to the article.

Now i want to achieve a responsive image grid positioning like you can see here. This could be achieved by using CSS.

But i don't know which CSS file i have to edit or how to get it working.

Somebody know how to achieve this and also a tip about what the CSS class(es) should look like?

I use Joomla 3.3.6 and the Afterburner2 template with Gantry framework.

Thanks for the solutions...(I would rate it but I have not enough reps) After I read them iI tried again and realized that I could change the column count in the settings of the menu item. This appears to me much more intuitive than making an override for the whole blog.php. I mean if I write the count of columns static in blog.php it is very inflexible!?

With that approach I had the problem that the intro text was always shown. Also when I set the option "Show intro text" in article or in menu to "hide". So i set the "more" at the beginning of the article and after that the text of the article. "Show read more" i also set to hide. So on my site with the category blog i only see images. One row with 4 images.

But then I get another problems:

I could not change the spacing between the images, because i want to make it a bit smaller.
If I reduce the width of the page so that only two images are displayed in one row, they are not exactly side by side. The right one is a bit under the left one.

First I thought that is the correct way I used, but after a while I was unsure again.

Can this be a good way (save it with a CSS override or something) or should I start again with another approach for example, edit the blog.php (at beginning I wanted to edit it, but then I don't how to change the part in blog.php to a 3- or 4-column layout)!?

I use the category blog layout and override it to wrap a link around the article intro-image, which points to the article.

Now i want to achieve a responsive image grid positioning like you can see here. This could be achieved by using CSS.

But i don't know which CSS file i have to edit or how to get it working.

Somebody know how to achieve this and also a tip about what the CSS class(es) should look like?

I use Joomla 3.3.6 and the Afterburner2 template with Gantry framework.

Thanks for the solutions...(I would rate it but I have not enough reps) After I read them iI tried again and realized that I could change the column count in the settings of the menu item. This appears to me much more intuitive than making an override for the whole blog.php. I mean if I write the count of columns static in blog.php it is very inflexible!?

With that approach I had the problem that the intro text was always shown. Also when I set the option "Show intro text" in article or in menu to "hide". So i set the "more" at the beginning of the article and after that the text of the article. "Show read more" i also set to hide. So on my site with the category blog i only see images. One row with 4 images.

But then I get another problems:

I could not change the spacing between the images, because i want to make it a bit smaller.
If I reduce the width of the page so that only two images are displayed in one row, they are not exactly side by side. The right one is a bit under the left one.

First I thought that is the correct way I used, but after a while I was unsure again.

Can this be a good way (save it with a CSS override or something) or should I start again with another approach for example, edit the blog.php (at beginning I wanted to edit it, but then I don't how to change the part in blog.php to a 3- or 4-column layout)!?

edited tags

edited Dec 4, 2014 at 1:11

13.3k
6
41
77

joomla-3.x overrides content gantry

deleted 4 characters in body; edited tags

edited Dec 2, 2014 at 3:18

13.3k
6
41
77

I use the category blog layout and override it to wrap a link around the article intro-image, which points to the article.

Now i want to achieve a responsive image grid positioning like you can see here. This could be achieved by using cssCSS.

But i dontdon't know which css-fileCSS file i have to edit or how to get it working.

Somebody know how to achieve this and also a tip howabout what the cssCSS class(es) should look like?

I use joomla versionJoomla 3.3.6 and the afterburner2Afterburner2 template with gantryGantry framework.

Best Regards, oodoloo

Thanks for the solutions...(iI would rate it but iI have not enough reps) After iI read them iiI tried again and realized, that iI could change the column count also in the settings of the menu item. This appears to me much more intuitive then makethan making an override for the whole blog.phpblog.php. I mean if iI write the count of columscolumns static in blog.phpblog.php it is very inflexible!? With

With that approach iI had the problem that the intro text was always shown. Also when iI set the option "Show intro text" in article or in menu to "hide". So i set the "more" at the beginning of the article and after that the text of the article. "Show read more" i also set to hide. So on my site with the category blog i only see images. One row with 4 images.

But then iI get another problems:

iI could not change the spacing between the images, because i want to make it a bit smaller.
if iIf I reduce the width of the page so that only two images are displayed in one row, they are not exactly side by side. The right one is a bit under the left one.

First iI thought that is the correct way iI used, but after a while iI was unsure again.

Can this be a good way (save it with a cssCSS override or something) or schould ishould I start again with another appraochapproach for example, edit the blog.phpblog.php (at beginning i wantI wanted to edit it, but then iI don't how to change the part in blog.phpblog.php to a 3- or 4-column layout)!?

I use the category blog layout and override it to wrap a link around the article intro-image, which points to the article.

Now i want to achieve a responsive image grid positioning like you can see here. This could be achieved by using css.

But i dont know which css-file i have to edit or how to get it working.

Somebody know how to achieve this and also a tip how the css class(es) should look like?

I use joomla version 3.3.6 and the afterburner2 template with gantry framework.

Best Regards, oodoloo

Thanks for the solutions...(i would rate it but i have not enough reps) After i read them i tried again and realized, that i could change the column count also in the settings of the menu item. This appears to me much more intuitive then make an override for the whole blog.php. I mean if i write the count of colums static in blog.php it is very inflexible!? With that approach i had the problem that the intro text was always shown. Also when i set the option "Show intro text" in article or in menu to "hide". So i set the "more" at the beginning of the article and after that the text of the article. "Show read more" i also set to hide. So on my site with the category blog i only see images. One row with 4 images.

But then i get another problems:

i could not change the spacing between the images, because i want to make it a bit smaller
if i reduce the width of the page so that only two images in one row, they are not exactly side by side. The right one is a bit under the left one.

First i thought that is the correct way i used, but after a while i was unsure again.

Can this be a good way (save it with a css override or something) or schould i start again with another appraoch for example, edit the blog.php (at beginning i want to edit it, but then i don't how to change the part in blog.php to a 3- or 4-column layout)!?

I use the category blog layout and override it to wrap a link around the article intro-image, which points to the article.

Now i want to achieve a responsive image grid positioning like you can see here. This could be achieved by using CSS.

But i don't know which CSS file i have to edit or how to get it working.

Somebody know how to achieve this and also a tip about what the CSS class(es) should look like?

I use Joomla 3.3.6 and the Afterburner2 template with Gantry framework.

Thanks for the solutions...(I would rate it but I have not enough reps) After I read them iI tried again and realized that I could change the column count in the settings of the menu item. This appears to me much more intuitive than making an override for the whole blog.php. I mean if I write the count of columns static in blog.php it is very inflexible!?

With that approach I had the problem that the intro text was always shown. Also when I set the option "Show intro text" in article or in menu to "hide". So i set the "more" at the beginning of the article and after that the text of the article. "Show read more" i also set to hide. So on my site with the category blog i only see images. One row with 4 images.

But then I get another problems:

I could not change the spacing between the images, because i want to make it a bit smaller.
If I reduce the width of the page so that only two images are displayed in one row, they are not exactly side by side. The right one is a bit under the left one.

First I thought that is the correct way I used, but after a while I was unsure again.

Can this be a good way (save it with a CSS override or something) or should I start again with another approach for example, edit the blog.php (at beginning I wanted to edit it, but then I don't how to change the part in blog.php to a 3- or 4-column layout)!?

joomla-3.x overrides content

findings from anothers tests after the first 2 responses

edited Nov 27, 2014 at 20:25

75
2
9

Loading

asked Nov 27, 2014 at 10:08

75
2
9

Loading