Change the size and spacing between columns in "Multicolumn" section (Dawn 11.0.0)

Store Design
, ,
1

Hello, everyone!

I’m using Dawn 11.0.0 theme for my website. On one of the pages, I have several Multicolumn sections with different number of columns (4 and 3).

Here’s what I would like to change: I need to make the pictures and captions in the section with 3 columns the same size as in the top section (as seen on the screenshot), centered and with the same distance between the columns as in the top section.

Will be infinitely grateful for any help! :folded_hands:

е4п.png
е4п.png3582×1416 372 KB

2

can you provide link to your page?

3

Of course, here’s the link: https://www.drawandcare.com/pages/our-team

4

Hi @DRAWandCARE ,

Please add below code on the head of theme.liquid file.

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code just above tag

If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

Best Regards,
Makka

5

Thank you SO MUCH for your help! It worked perfectly!

6

Hi @DRAWandCARE

This is Richard from PageFly - Shopify Page Builder App, I’d like to suggest this idea:
Online Store ->Theme ->Edit code
Assets ->Base.css

#shopify-section-template--21493104083244__c9b9be5c-631c-441d-a8e2-dd840d7d8fc5.grid--3-col-desktop.grid__item {
        width: calc(25% - var(--grid-desktop-horizontal-spacing) * 3 / 4) !important;
        max-width: calc(25% - var(--grid-desktop-horizontal-spacing) * 3 / 4) !important;
} 
#Slider-template--21493104083244__c9b9be5c-631c-441d-a8e2-dd840d7d8fc5 {
    justify-content: center !important;
}
#shopify-section-template--21493104083244__c9b9be5c-631c-441d-a8e2-dd840d7d8fc5.grid--3-col-desktop .multicolumn-card__image-wrapper.multicolumn-card__image-wrapper--full-width.multicolumn-card-spacing {
    margin-left: 5rem !important;
    margin-right: 5rem !important;
}

Hope you find my answer helpful!
Best regards,
Richard | PageFly

7

Hello again!

I’m wondering if there is a solution to make this image in a single column the same size as all the others on the mobile version. It is desirable that it is also centered. It’s already good on desktop.

Thank you SO MUCH in advance!

Screenshot_20231023_150826_Chrome.jpg
Screenshot_20231023_150826_Chrome.jpg1080×2400 125 KB

8

Does this change it for all multicolumn sections? If so, how do we make it apply to just a particular multicolumn section?