3 pictures side by side. Dawn theme

Shopify Discussion

Topic summary

A user wants to display three images side by side with no spacing between them and spanning the full width of their site on the Dawn theme.

Solution Provided:

  • Use the “Multicolumn” section in the theme editor
  • Remove default heading and description fields
  • Upload the desired images to each column

Issue with Spacing:
The user successfully added the images but needs to eliminate gaps between them. A CSS code snippet was provided to apply in the “Custom CSS” field of the Multicolumn section:

ul.multicolumn-list {
  column-gap: 0 !important;
  justify-content: center;
}

Current Status:
The CSS solution didn’t work as expected. The support team is now requesting additional information about which specific theme version is being used and which page the images are being added to in order to troubleshoot further. The discussion remains open with the issue unresolved.

Summarized with AI on November 4. AI used: claude-sonnet-4-5-20250929.
1

I would like to add 3 pictures side by side.

Like seen on the picture.

How do I do that?

www.kristian-kristian.com

Skærmbillede 2024-10-26 kl. 15.40.54.png
Skærmbillede 2024-10-26 kl. 15.40.54.png532×272 198 KB

1 Like
2

Hi @KRISTIAN-KRISTI ,

You can click on “add section” in your theme and select “Multicolumn”. Here is the screenshot for your reference: (https://prnt.sc/YCHqOVbQhYs9).

Then you just need to remove the heading and description as the screenshot here: (https://prnt.sc/UQXlC6TNZ1kC) and upload the image you want to display. So it will look exactly like the screenshot you shared above.

Here is the video guide in case you need: https://www.loom.com/share/c179e3732c104cb8bec0b60b49177983

I hope it can help. Thank you!

Best,

Daisy - Avada Support Team.

3

Thank you! That’s great!
How do I then get my pictures to be side by side, with no space in between and to be the full width of the site?

4

Hi @KRISTIAN-KRISTI

You can use this CSS code below to remove the space between images.

Step 1: Open the “Multicolumn”

Step 2: Apply the code to the “Custom CSS” field here: https://prnt.sc/Fyzc3oHDPd7v

It will look like this: https://prnt.sc/UkgqfJRjkG4w

ul.multicolumn-list {
    column-gap: 0 !important;
    justify-content: center;
}

Best,

Daisy - Avada Support Team.

1 Like
5

It didn’t do anything. Is there another way to do it?

6

Hi @KRISTIAN-KRISTI

Could you let us know which theme you are currently using? Additionally, could you specify the page where you are adding this block with the three images?

We look forward to your response. Thank you!

Best regards,
Daisy - Avada Support Team