How to Put Images Side by Side in Carrd

In this easy tutorial, you’ll learn how to put images side by side in the Carrd editor. You can follow along after signing in to your Carrd account. You can also use the free version if you don’t plan to save your project.

How to Put Two Images Side by Side in Carrd

To put two images side by side in Carrd, follow these simple steps:

1. After logging in, choose the site you want to edit or start a new site from scratch.
2. In the top-right menu, click the Plus icon and select Container.
3. A new Container element will be added to the page. Click on it, and a new menu will appear on the left.
4. Here, change the Type from the default setting to Columns. By default, Carrd will create two columns, each set to 50%. You will also see two empty columns inside your Container.
5. Now you can add your images. Go to the top-right menu, click the Plus icon, and select Image. The image should automatically be added to the first column. If not, simply drag and drop it into the correct column.
6. Repeat the process to add another image to the second column.

How to Add More Than Two Images Side by Side

The process is similar to the one above, and you will still need to use a Container.

1. If you already have a Container on your page, click on it to access the left-side menu.
2. To add more than two images, you need to add more columns. Click the Add button below your last column. You can add up to five columns. The column widths will automatically adjust to fit the available space, but you can change the percentage of each column to suit your needs.
3. Once you have added the columns, simply add an Image element to each column and drag and drop it into place if necessary.

How to Make Images Stack on Mobile

If you want to optimize your image layout for mobile viewers, follow these steps:

1. Start by creating a Container and adding as many columns with images as you need.
2. Then switch to the mobile view by clicking the Mobile icon in the top-right menu.
3. Now click on your Container and click the Brush icon at the top of the left-side menu.
4. Scroll down to the Mobile settings and switch from Auto to Manual.
5. In the Layout field, you can choose between Stack, Stack (reverse), and Default.

Default keeps your images side by side on mobile. Because the available screen width is smaller than on desktop, the images may appear reduced in size.

Stack places the images one below another on mobile. This gives each image more horizontal space and allows them to remain larger and easier to view on smaller screens.

Stack (reverse) works the same way as Stack, but reverses the order of the columns and therefore the order in which the images appear on mobile.

For example, if your desktop layout is:

Image 1 | Image 2 | Image 3

using Stack will display them as:

Image 1
Image 2
Image 3

while Stack (reverse) will display them as:

Image 3
Image 2
Image 1

Images Side by Side vs. Gallery in Carrd

If you only want to display a few Carrd images next to each other, using a Container with Image elements is a better option than the Gallery element in Carrd.

With a Container, you can place two, three, or more images side by side and control their size, spacing, alignment, and layout. This is especially useful for comparison images, travel photos, portfolio projects, or small image sets.

The Gallery element is better suited for displaying a larger collection of images. Unlike a Container with Image elements, a Gallery can include more than five images and is designed specifically for browsing multiple images.

However, the Gallery element does not give you the same control over a simple side-by-side layout. If you want to place multiple galleries side by side, you can create a Container and add Gallery elements instead of individual Image elements. This allows you to place up to five galleries side by side within one Container, with each gallery containing multiple images.

Use a Container with Images when:

• You want two or a few images side by side.
• You want more control over spacing and image sizes.
• You want to create a specific desktop and mobile layout.
• You want each image to have its own link or settings.

Use a Gallery when:

• You want to display a larger collection of images.
• You want visitors to browse through multiple images.
• You don’t need all images to remain visible in a simple side-by-side row.
• You want multiple images to be grouped into one element.
• You want to create a more compact image layout without adding a separate Image element for every photo.
• You want to use multiple galleries inside a Container, for example, to create up to five galleries side by side.

Carrd Tip: If you want complete control over how images appear side by side, use a Container with separate Image elements. For larger image collections, use the Gallery element instead.

Common Problems

When creating side-by-side images in Carrd, you may run into a few common layout problems. Here are some quick fixes:

Images aren’t evenly spaced

If the images don’t have equal spacing between them, check the Container’s alignment and spacing settings. Also make sure the images have similar widths and that you haven’t added extra margins or padding to individual Image elements.

One image drops below another

If one image moves to the next row, the available space inside the Container may not be wide enough for all the images. Try reducing the image widths or the gap between them. You can also check the Container’s column and layout settings to make sure the elements are allowed to stay in the same row.

The mobile layout breaks

A layout that looks good on desktop may not work well on smaller screens. Switch to Carrd’s mobile view and adjust the Container’s mobile settings separately. You can change the layout from Auto to Manual and use options such as Stack if you want the images to appear one below another on mobile.

Always check your side-by-side image layout in both desktop and mobile views before publishing your site.

Conclusion

Creating side-by-side images in Carrd is easy once you use the right layout. A Container gives you more control over image size, spacing, and positioning, while the Gallery element is better for larger collections of images.

For the best results, always check how your layout looks on both desktop and mobile before publishing. With a few adjustments, you can create clean and responsive image layouts without any custom code.