What is it?
We don't recommend copying, then pasting, content (e.g. text, images, graphics etc.) from outside sources into any WYSIWYG editor found in MC Professional. If you do, this may bring incompatible code into your website or email client. Content from outside sources may not display as intended.
Images
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.
Desktop View
Mobile View
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.
Borderless Tables
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).
Desktop View
Column Layout
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.
Desktop View
Buttons
You can also create a single HTML button by selecting the text of the link and then choosing 'Heading 6' from the Format dropdown.
Website View
*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.