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:
1) I could not change the spacing between the images, because i want to make it a bit smaller.
2) 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)!?