What is it?
One of the most important aspects of responsive design is how mobile devices handle images. Start by selecting the image, then click the image icon above the editor (the 'tree' icon).
Next, choose the 'Appearance' tab.
Near the bottom of the appearance tab, you can select from a few different classes* from the Class dropdown.
There are several classes to choose from, but you'll primarily use those near the bottom of the list and are called 'mc-image-left', 'mc-image-right', 'mc-image-left-large' and 'mc-image-right-large'. These classes will align the image to the right or left, and wrap the text around them They will also add some space between the image and the text, which we call padding. The difference between 'mc-image-left' (or '-right') and 'mc-image-left-large' (or '-right-large') is what happens on a phone view. If the image is larger than 300 pixels wide, you could choose 'mc-image-left-large' and the image will display on its own line and full-size on the phone. If its smaller than 300 pixels, choose 'mc-image-left' and the image will remain aligned and will be no more than half the width of the screen.
There is also a class designed to work well with tables, as you might see on a typical Board of Directors page. This page is built using a table as a container. While we don't typically recommend using tables on a responsive site, this table is special. The table on this page is given a class* of 'grid-layout'.
Start by placing your cursor anywhere inside the table, then click the table icon above the editor.
From there, select the 'grid-layout' class from the Classes dropdown.
This class allows the table to 'unwrap' when viewed on the front-end of your site, and each cell of the table will be displayed as its own block in a 3-column layout displaying top to bottom, left to right. Each column will be at least 216 pixels wide. If there isn't enough screen space for 3 columns at 216 pixels wide, the table will collapse to 2 columns. And if there isn't enough space for 2 columns at 216 pixels wide, it will collapse so a single column.
Make sure that the table has the 'grid-layout' class, the table and cells don't have any set heights or widths assigned, and that each board/staff member's info is in a single cell. Note: We do recommend cropping/editing/resizing all images to be the same size before uploading the image to the Media Manager. Check out this article for instructions for resizing images. Also, images will be aligned to the left and will be no larger than the width of the column.
You can also hide the borders on a table to make it appear borderless on your website using a class. To do this, place your cursor inside the table and click on the "Insert/Edit Table" icon. In the Class dropdown, scroll to the very bottom and choose '(value)'.
Once you've selected '(value),' you'll have the option to type a class into the box. Type ' borderless' (make sure to include the space before the b) and click update.
Hiding the Right Bar
You can also remove the sidebar from a specific article by adding ' full-width' to the Page Class Suffix area (make sure to include the space before the word full).
Additionally, you can make any article a columned layout by adding ' mc-columns' to the Page Class Suffix area in the bottom righthand corner of the the menu item editor.
You can also create a single HTML button by selecting the text of the link and then choosing 'Heading 6' from the Format dropdown.
*Please note that most of the other classes listed in the dropdown are for other parts of you site and won't have an effect on the your text and images. Please avoid using them.