Column Alignment Issues


Working from a responsive HTML5 template where I made some mods, but I can’t figure this out.

There are three columns that align under three huge font-awesome icons. The icons are aigned across the width of the page nicely, but the text columns below (containing lists) do not. I want the lists to have left justified content (which is working), but each column to be aligned with the center of the icons.

It’s not working for me. Any help/thoughts are most appreciated.

You can see it here under “what we do”.

Thanks guys!

Actually, it looks to me (by applying outline rules) that the columns do (almost - the markers are “outside” instead of “inside”) align with the center of the icons

The issue is that some of the list items do not have enough content in them and so the alignment is not apparent.

Thanks Mittineague.

Interesting insight. It looks like the 2nd and 3rd column needs some type of left padding. Is there a way to do that w/o increasing the gap between the > and the bullet text?

Normally, a UL has a default padding left of 2.5em. You have zero padding and a decimal number of left margin. Same diff, I guess. Add more to increase the space to the left of the UL. It will not increase the space between the marker and the text. Changing the LI padding-left does that.

Hi ronpat,

Yeah… I was playing with that off line while you were posting. I put some left margin on it but don’t believe it’s correct because it becomes a mess when I check it on small screens:

(colors and border for temporary reference only)

How do I move columns 2 & 3 over w/o blowing them out when responsive?


I’m interested in solution(s). I’m more a developer that a designer. The only thing I can think of that might work is to add a container (ugh, reluctant to add tag bloat) for the lists, where the list might have width auto and the container elements retain the the centering

Hi Mittineaguw,

Not sure I follow. By container, you mean div? For each list or all together? Do you have an example?


This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.