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
5403 984 1006

Hi @rjluna  

Could you please provide your store password to check?

Screenshot 2023-08-29 at 08.40.13.png

- Helpful? Like and Accept a solution. - Donate: Buy coffee - or Paypal me ❤️
- Ryviu - Product Reviews app, collect consumer photo reviews, import reviews from AliExpress, Amazon, Etsy, Shoppe and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 3 months of Shopify for $1/month. Sign up now

rjluna
Excursionist
29 0 5

Password: cornholeantics 

Dan-From-Ryviu
Shopify Partner
5403 984 1006

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

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

- Helpful? Like and Accept a solution. - Donate: Buy coffee - or Paypal me ❤️
- Ryviu - Product Reviews app, collect consumer photo reviews, import reviews from AliExpress, Amazon, Etsy, Shoppe and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 3 months of Shopify for $1/month. 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."
SAN_MSWEB
Shopify Expert
867 109 112

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 Expert
5300 950 1260

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 Expert
5300 950 1260

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
5403 984 1006

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 and Accept a solution. - Donate: Buy coffee - or Paypal me ❤️
- Ryviu - Product Reviews app, collect consumer photo reviews, import reviews from AliExpress, Amazon, Etsy, Shoppe and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 3 months of Shopify for $1/month. 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."