I want to make the multicolumn section full width - dawn theme

I’m using Dawn theme in that I want to make the particular multicolumn section in home page wants to be full width.

website: https://mvpwuul44of79alk-93050175853.shopifypreview.com
password: amber

1 Like

Hey @Sivadarshan

Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following code in the bottom of the file above </ body> tag
<style>
.page-width.section-template--24944174334317__multicolumn_98FWyE-padding.isolate.scroll-trigger.animate--slide-in {
    max-width: 100% !important;
}
</style>

RESULT:

If I managed to help you then a Like would be truly appreciated.

Best,
Moeed

Please add this code below to Custom CSS of that section from your store admin > Sales channels > Online Store > Themes > Customize, click on that Multiple column section

.page-width { max-width: 100%; }

Hii @Sivadarshan

By default, Dawn uses a .page-width wrapper that limits width of sections.
To make the multicolumn section full width:

Go to your Shopify Admin panel.
Navigate to:
Online Store > Themes > Edit code

Open the file:
“Sections/multicolumn.liquid”

<div class="page-width">
Replace the class “page-width” with a full-width alternative or simply remove it:

This change will allow the multicolumn section on your homepage to span the full width of the screen.

Output:

Hi @Sivadarshan ,

I noticed that you’re using the multi-column section on your homepage.
Therefore, you can apply custom CSS specifically to this section.

Go to: Theme → Customize → Homepage, then select the section you want to adjust the width for, and paste the following CSS code:

#shopify-section-template--24944174334317__multicolumn_98FWyE {
    max-width: 100%;
}

screenshort:


Please let me know if it works as expected

Best regards!