Wednesday, December 12, 2018

Roksprocket 4 Column Grid In Gantry Hydrogen

While working a Joomla! site built with Gantry 5 Hyrdogen template I was having an issue when switching between different column quantities. If I had the columns set to 3 everything was fine; however, when I tried to switch between 3 to 4 columns everything was in one column.

I got around this issue by going into the basic CSS file. This file is located on root/components/com_roksprocket/layouts/grids/themes/basic/basic.css. On line 23 I changed the following:

.sprocket-grids-b-columns-3 > li {width: 33.333333333333336%;width: -webkit-calc(100% / 3);width: calc(100% / 3);}


.sprocket-grids-b-columns-3 > li {width: 33.333333333333336%;width: -webkit-calc(100% / 4);width: calc(100% / 4);}

Once I knew this would work I added the CSS to my custom.css, and set the original “basic.css” back. My override was working fine.

I hope this helps someone else out there…



Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>