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);} to .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…