Usually, I’m able to muddle through making my results look ok, but I’m drawing a blank in this particular case. If you check out the link below, you’ll see what I’m working with. To clarify the situation, I’ll be working with an undetermined number of results and sometimes I will have to provide more info rows(the alternating colors). My intent is to create a row that will work well in both desktop and mobile, which is the reason for the collapsing divs.
Which is all well and good, but it’s ugly as heck. I’m wondering what I might be able to do to make it a bit more visually appealing. Your ideas, thoughts and comments are greatly appreciated!
Since this is tabular dataI would recommend using a table. ( you can always use CSS display:block; to make it mobile friendly), but it is the semantically correct solution.
ART DIRECTION:
If you follow my suggestion on using table you can start, by creating a header row. this row will ALWAYS be present regardless of the # of data rows. You can then focus your attention on styling that (wheel rim , typography for the headers), after that you can easily zebra stripe for readability.
I’d use either a table as @dresden_phoenix pointed out, or a definition list. For your use case, a table might be fine, but for larger/wider data, I’m more inclined to use definition lists, simply because they’re a lot more scalable on very small screens.
Please be aware that I didn’t check the code of these examples. You’re better served just taking visual cues and creating the CSS and HTML for it yourself.
Another thing… These two data sets might look better if you placed them right underneath your main content area (right column), set at 50% width, side by side.
I agree that a table would be the semantic way to do it and a table does not need to display as a table. You can, for example, make <tr>s display: inline-block. That would result in something simialr to what you have, but giving a unform width to the <td>s would look neater.
I did even try an experiment where I did that and tried making the <table> display: flex, but it seems that flex does not work with tables, even if you change the display type of the elements. So in the end I made it a list instead.