Horizontal center alignment for row content / 5 column layout

[iamausten]

Hi there,
I’m in the process of putting together a site and was wondering if there’s a workaround or method of making 5 columns within a row, or alternatively center aligning one row of 3 icons above a second row of 2 icons.
In the screen grab below i’m hoping that one of the three scenarios is possible, with the ideal being 5 columns centered horizontally. However, at this point either scenario from the screengrab attached will suffice.

Thanks

Attachments:

You must be logged in to view attached files.

[Rui Guerreiro – SUPPORT]

Hi,

You can choose the 3 or 4 columns in the Icon Box and add your 5 icons.
When you are done let us know that page url so we can sort some css to display it in 5 columns.

-Rui

[iamausten]

Hi there Rui,
thanks for the quick reply.
I’ve set up the icon box as per your suggestion (refer to screenshot). The URL is http://jabindekeizer.com/

Thanks for your help in tweaking this section into 5 columns, it’s very much appreciated. Great template by the way.

Thanks,
Austen

Attachments:

You must be logged in to view attached files.

[Kyle – SUPPORT]

Hi

Add this to your custom css:

@media only screen and (min-width: 768px) { 
.spb_icon_box_grid[data-columns="4"] .spb_icon_box {
  width: 20%;
}
.spb_icon_box_grid[data-columns="4"] .spb_icon_box:nth-child(4n) {
  box-shadow: 1px 0 0 rgba(0, 0, 0, 0.1);
}
.spb_icon_box_grid[data-columns="4"] .spb_icon_box:nth-child(5n) {
  box-shadow: none;
}
}

– Kyle

[iamausten]

Hi Kyle,
that worked perfectly, thanks so much for your help. Very much appreciated 🙂

[Kyle – SUPPORT]

Great, no problem

[tystra]

Hi there, hope it’s ok to add on to this as it’s almost the same. I want to do the same thing (5 columns) with regular icon boxes. Currently can only stretch them to 1/4 width or 1/6 width. Is there similar CSS I can use to make 5 columns for these as well? Thanks!

[Kyle – SUPPORT]

Hi

What’s your link? Have you tried the css provided above?

– Kyle

[tystra]

Yes, tried that one, but no effect. I think because the icon boxes (regular) have no spb_icon_box_grid element wrapped around them, so are formatted a bit different.

Here is one of the links where it is: http://tiwi.konnectedsolutions.com/product/rapaura-springs-chardonnay/. Under the product image you’ll see the icon box section.

Thanks!

[Swift Ideas – Ed]

Hi there,

I’d suggest adding an extra class to the row, which has the icon boxes within, so that you can control where this is used. Then you can use this css:

@media only screen and (min-width: 768px) { 
.spb-icon-box-5-col .spb_icon_box {
  width: 20%;
}
}

“spb-icon-box-5-col” being the extra class.

Hope that helps.

– Ed