The business detail icons sections (below header navigation and in the pre-footer) spacing is off when I reduce the number of elements per row to 3.
I removed the office hours row but now the remaining three elements are not being spaced evenly/correctly.
You can see on the development site homepage, that the space between the second and third icons is greater than the space between the first and second.
The spacing between each element should be identical so that these elements properly fill the row.
How do I fix this issue?
The elements are aligned to a grid, where each takes one third of available space. It is only because the difference in text length, that makes it seem like the spacing is off:
There is a way to take full control of the alignment, but it requires a couple of steps:
1. In Theme options -> Footer choose only 1 column for the prefooter in the "Prefooter columns" option.
2. Now go to Static blocks and create a row with three columns, add the Icon with Text widget to each. Each should have only single element and should be set to display only one in a row. (You can set the column width for each of the cells).
3. The last step is to display the Static Block below header and in the prefooter. You can do this in Appearance -> Widgets, by adding the Static Blocks widget.
Let me know, how it goes,Andrej
That worked perfectly! Thanks for the quick response.
I will reach out if I have any additional questions.
I am glad to hear it work.