Articles in this section

See more

Best practices for managing responsive content

Avatar
John Mackenzie
Updated
Follow

MC Professional supports several CSS class features for optimizing your website for mobile and controlling page layout. This article covers image alignment classes, borderless table styles, sidebar visibility, column layouts, and button formatting.

Caution: Avoid copying and pasting text, images, or graphics from outside sources into the editor. This can introduce incompatible code that affects how content displays on your website or in email.

Image classes

Image classes control how images align and wrap text on desktop and mobile. To apply a class to an image:

  1. Select the image in the editor.
  2. Select the Image icon above the editor (the tree icon).
  3. Select the Appearance tab.
  4. Select a class from the Class dropdown.

The four primary image classes are:

  • mc-image-left — Aligns the image left and wraps text around it. On mobile, the image stays aligned at up to half the screen width. Use for images under 300px wide.
  • mc-image-right — Same as mc-image-left, but right-aligned.
  • mc-image-left-large — Aligns the image left and wraps text around it. On mobile, the image displays full-width on its own line. Use for images over 300px wide.
  • mc-image-right-large — Same as mc-image-left-large, but right-aligned.
Note: Resize and crop images to a consistent size before uploading to the Media Manager. See Resizing images for instructions. Most other classes in the dropdown apply to other parts of your site and will not affect text or images — avoid selecting them.

Borderless tables

To hide table borders so the table appears borderless on your website:

  1. Place your cursor inside the table.
  2. Select the Insert/Edit Table icon.
  3. In the Class dropdown, scroll to the bottom and select (value).
  4. In the text field that appears, type borderless (include the space before "b").
  5. Select Update.

Hiding the right sidebar

To remove the sidebar from a specific article page:

  1. Open the menu item in Website > Menu Manager.
  2. In the Page Class Suffix field, type full-width (include the space before "full").
  3. Select Save.

Column layout

To display an article in a two-column layout:

  1. Open the menu item in Website > Menu Manager.
  2. In the Page Class Suffix field in the bottom right corner of the editor, type mc-columns (include the space before "mc").
  3. Select Save.

Buttons

To format a link as a styled button, select the link text and select Heading 6 from the Format dropdown. For detailed steps, see Adding a button to an article.

Related articles