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

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

rjluna
Excursionist
29 0 5

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!

 

Screenshot.jpg

Replies 12 (12)

Dan-From-Ryviu
Shopify Partner
11612 2276 2456

Hi @rjluna  

Could you please provide your store password to check?

Screenshot 2023-08-29 at 08.40.13.png

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...
Sign up now.

rjluna
Excursionist
29 0 5

Password: cornholeantics 

Dan-From-Ryviu
Shopify Partner
11612 2276 2456

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

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

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...
Sign up now.

rjluna
Excursionist
29 0 5

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."

INA_MSWEB
Shopify Partner
1281 144 168

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

If it’s helpful to you, please mark it as a solution.  


Need Help with Shopify Design, Migration, Speed, or Custom tasks?  
email: hi@mswebdesigner.com
Try Our Conversion Booster app to get more sales | Connect Our Founder Linkedin

rjluna
Excursionist
29 0 5

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

ZestardTech
Shopify Partner
6134 1097 1473

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%;
}

 

ZestardTech_0-1693285919246.png

 

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
rjluna
Excursionist
29 0 5

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

ZestardTech
Shopify Partner
6134 1097 1473

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%;
}
Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
rjluna
Excursionist
29 0 5

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

Dan-From-Ryviu
Shopify Partner
11612 2276 2456

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

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...
Sign up now.

rjluna
Excursionist
29 0 5

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."