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

[DRAWandCARE]

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! 🙏

[theycallmemakka]

can you provide link to your page?

[DRAWandCARE]

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

[theycallmemakka · Accepted solution]

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 </head> tag

<style>
@media screen and (min-width: 990px){
   #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);
        max-width: calc(25% - var(--grid-desktop-horizontal-spacing) * 3 / 4);
    } 
}
#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;
}

ul#Slider-template--21493104083244__c9b9be5c-631c-441d-a8e2-dd840d7d8fc5 {
    justify-content: center;
}
</style>

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

[DRAWandCARE]

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

[DRAWandCARE]

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!

[SKRASTS]

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

[PageFly-Richard]

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