Working with Tables and Images on Mobile

When working with tables and images we always recommend that you review how they appear on mobile. Depending on how your table is configured and the size of your image, they may appear disproportional on mobile. This is because mobile screens are a lot smaller than desktops and laptops.

Working with Tables

To modify your table so that it appears appropriate on mobile follow the steps below.

  1. In the CMS navigate to the page or HTML block where you have your table.
  2. Right click on your table and then select Table Properties.
  3. Select the Advanced Tab and enter mobile-styles in the Stylesheet Classes field.

Working with Images

To modify your image so that it appears appropriate on mobile follow the steps below.

  1. In the CMS navigate to the page or HTML block where you have your image.
  2. Right click on your image and then select Edit Div if it's available.
    1. You can also select Image Properties if there is no Div.
    2. Next, select the Advanced tab.
  3. Enter columns large-10 small-12 or columns medium-12 small-12 in the Stylesheet Classes field depending on the size of your image.

You'll only need to use the options above if you notice an image or a table is not appearing properly on mobile.

If you are using the stylesheet classes in the div or image container, remove the image dimensions (Width and Height). This will ensure your image does not appear distorted.

0 Comments

Add your comment

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.