Make Multicolumn image size small - Dawn theme

[Sivadarshan]

In dawn theme how to make the multicolumn section’s image size to small.

website: https://coffeebyrsa.myshopify.com/

password: coffee

the section i’m talking about

Thanks in advance

[Dotsquares]

Hi,

As per your concern regarding making the image size smaller in the Multicolumn section of the Dawn theme, you can achieve this by adding some custom CSS. Here’s how you can do it:

.multicolumn-card__image-wrapper–third-width {
width: 90px;
}

This code will reduce the image size inside the multicolumn section as shown in the screenshot belwo;

You can tweak the max-width value (e.g., 60px, 100px) based on how small you’d like the image to appear.

Please let me know if you need further assistance, the community will be happy to help

Best regards,

[tim_1]

There is a lot you can do. The codes below should be added to the “Custom CSS” setting of this section.

1. At the moment, if your window is less then 990px wide, the section reverts to single-column. Probably not the best, for your content you may want the number of columns to decrease a little.
   You can do it with code like this to make it 2 columns for screens wider than 480px and 3 columns for screens 640 to 990px wide:

@media (min-width:480px) and (max-width:639px) {
      .multicolumn-list  .multicolumn-list__item {
      width: calc(50% - var(--grid-desktop-horizontal-spacing) * 1 / 2);
      max-width: calc(50% - var(--grid-desktop-horizontal-spacing) * 1 / 2)
    }
  }
  @media (min-width:640px)  and (max-width:989px) {
      .multicolumn-list  .multicolumn-list__item {
      width: calc(33.33% - var(--grid-desktop-horizontal-spacing) * 2 / 3);
      max-width: calc(33.33% - var(--grid-desktop-horizontal-spacing) * 2 / 3)
    }
  }

Then you may want to have your image to the left of the text.

Here is the code for this (block setting “Image width” will still work, though a bit differently):

.multicolumn-card.content-container {
  display: flex;
}

.multicolumn-card__image-wrapper {
  margin: 0;
  padding: 3rem 0 2.5rem 2.5rem;
}

With both code snippets applied: