How to reduce padding on left/right side of multicolumn Dawn Theme

I have a multicolumn on my home page - Dawn Theme. How can I reduce the padding on the left & right side of the column (screenshot attached below)?

I would like to add the custom css only to this section. Thanks!

1 Like

Hi @rjluna

Could you please provide your store password to check?

Password: cornholeantics

Please add this CSS code at the Custom CSS of that section

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

It say’s the css code is invalid. "Correct the errors to save your custom CSS.

To add custom styles to your entire online store, go to theme settings."

Hi @rjluna

I hope you are doing good and welcome to the Shopify Community!
I am San from MS Web Designer.

Please add this css in your bottom of the base.css file:
.section-template–17743120236844__multicolumn-padding {padding-left: 10rem !important; padding-right: 10rem !important;}

Regards,

San

Hello @rjluna

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > base.css and paste this at the bottom of the file:
.multicolumn-card.content-container {
width: 100%!important;
}
.multicolumn .page-width {
max-width: 100%;
}

Is the there code I can add only that section and not the entire website? Thanks.

1 Like

Will this code only apply to that section of the website and not the entire website? Thanks.

Hello @rjluna

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > base.css and paste this at the bottom of the file:
.multicolumn-card.content-container {
width: 100%!important;
}
.page-width {
max-width: 100%;
}

Thanks. This code works but it applies it to the entire website. I was hoping to only having it apply to that section.

You can make code apply to that section only by adding code in Custom CSS section in your Theme Customize of that section

When I add that code to the Custom CSS section I get error: “Invalid CSS - certain At-Rules are not supported. Try using global CSS.”