Love them or hate them, Area Layouts can be a great tool for your editors. However, you (the developer) aren't given a great deal of control over how these are implemented in regards to HTML tags and classes (although, that may be changing!). 

Sometimes that's ok, sometimes it's not. For instance, in a responsive site, elements in an Area Layout may look fantastic on your desktop, but squished/broken/awful on your tiny phone.

C5 Layout before media queries added.

Fortunately, while Area Layouts might not be wrapped in your ideal markup, you can still use CSS media queries and some simple CSS to make things look a little more acceptable.

C5 Layout after media queries added.

As you can see, on a smaller screen, the three columns broke into one. Here's the CSS:

/* if screen less than, let's say, 700px wide */
@media screen and (max-width: 700px) {

/* remove column float and make full-width */
.ccm-layout-col {float: none !important; width: 100% !important;}

/* remove column "spacing" */
.ccm-layout-col-spacing {margin: 0 !important;}


Basically, if the screen is less than the specified width, the column float is removed so each Layout Cell breaks to it's own line. Then the column width is changed to 100% so they take on the width of the container. Lastly, the margins are removed from the spacing column because the editor specified "spacing" is no longer needed.

Might not be ideal, but it's pretty darn simple to make a big improvement.

A few final notes

If you're the type that loses sleep over using !important in your CSS, I feel your pain. You'll also be dealing with in-line styles for column widths. At least there's no tables, right?! But if you really can't handle that, you might want to turn off layouts and consider going with a custom block or page type solution instead - which may be the proper route anyway.

Speaking of page types, this example is a blanket override of all layouts for a site. If you like, you could take it further and do different media queries based on page types. You could also play with adding a CSS classes/hooks to via the Area Design menu - but that might mean a couple trips to headache-ville.