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.
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.
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.
Comments
Thanks for this article, but could you please tell me where I should paste the css snippet : in the custom css section, in the header, or...? I'm a bit confused
It's best if the CSS is pasted into your site's main CSS file. The location within the existing CSS shouldn't matter (end of the file is an easy solution). As long as that main CSS file is included on every page of the site (typically the case), the CSS will affect all area layouts on the site.
Commenting has been disabled.