Creative CSS Solution to Columns

[jknetdesign]

This layout is what they want on desktop but I don’t have a solution for mobile layout. There is a hierarchy of staff members. The top is just centered. Shannon and Brian are in a 2 column short code and the rest is a four column short code. Any creative solutions to how the hierarchy can stay in the right order on mobile and maintain the layout on desktop.

http://www.holadayseedcompany.com/team/

[Shikkediel]

Small profile pictures, icons representing the functions inside the business (and/or a general department header at the top) and only minimal description unless a person is clicked (triggering a larger info screen)?

Edit – depending on media queries naturally…

[Shikkediel]

Robots looking for mail addresses to add to their spam list are going to have a field day on this page by the way…

[jknetdesign]

What’s the best way to protect these email addresses?

What I meant by the layout is the columns. This is what they want on desktop, but I don’t know how to make mobile friendly.

[jknetdesign]

I added Email Address Encoder plugin and changed visible email addresses to (example) Contact John. Is this good enough?

As for the layout, it’s a little hard to explain but I just used two columns and tweaked accordingly for mobile.

[Author]

Posts