Images Side by Side

It used to be common to place images side by side by inserting them into a table. This does not work well on mobile devices because tables often maintain a fixed width, and the images do not adjust properly to screen size. As a result, users may need to scroll sideways to see all the content.

Adding Images with the Editor Icon Maker

The Icon Maker in the editor makes it easy to place images side by side, display them at the same size, and add text below each image. The images adjust automatically to the user’s screen size, unlike when images are placed in a table, for example. This method does not require working in the HTML view.

The Icon Maker allows 32 characters of text with each image.

Ready-Made Template with Images Side by Side

In Canvas Commons, you can find a template with images placed side by side that automatically rearrange according to the user’s screen size. The template is a regular page and can be imported into a course. The page is then saved in the course pages.

To replace the images, you need to work in the editor’s HTML view. There is no limit on the length of the text.

To find the template in Canvas Commons, search for:

Responsive images side by side

See an example of how the template appears in a course.