Re: Add margin to Dawn theme

Solved

How can I adjust the margin size in Dawn theme?

iamitzel
Visitor
1 0 0

Hi! I need help changing the margin size  for my site. I removed this code from the base.css:

 

.page-width {
max-width: var(--page-width);
margin: 0 auto;
padding: 0 1.5rem;
}

.page-width-desktop {
padding: 0;
margin: 0 auto;

 

Because I want to change the header & footer to full width.

 

Here's my website link: https://itzelshopping.com/

 

thanks!

Accepted Solution (1)

Yeady123
Explorer
61 7 9

This is an accepted solution.

 

@iamitzel To change the margin size of your site, you can modify the CSS code for the specific elements you want to change. For example, to make the header and footer full width, you can add the following CSS to your stylesheet:

header, footer { width: 100%; margin: 0; }

If you want to change the margin size for the main content area, you can modify the .page-width class:

.page-width { max-width: var(--page-width); margin: 0 auto; padding: 0 1.5rem; /* add this to adjust the margin size */ margin: 2rem; }

Note that in the example above, the margin size has been changed to 2rem. You can adjust the value to whatever size you prefer.

- Was my reply helpful? Click "Like" to let me know!
- ----Was your question answered? Mark it as an Accepted Solution
You can get in touch with me via WhatsApp on +88013-13075440
Email: shahinkhan2424ft@gmail.com

View solution in original post

Replies 2 (2)

Dan-From-Ryviu
Shopify Partner
10868 2143 2277

You can add this code at the bottom of your base.css code to add margin for your store

.page-width,

.header-wrapper, footer {

margin-left: 20px !important; 

margin-right: 20px !important;

}

- Solved it? Hit Like and Accept solution! ❤️Buy Me Coffee❤️
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Yeady123
Explorer
61 7 9

This is an accepted solution.

 

@iamitzel To change the margin size of your site, you can modify the CSS code for the specific elements you want to change. For example, to make the header and footer full width, you can add the following CSS to your stylesheet:

header, footer { width: 100%; margin: 0; }

If you want to change the margin size for the main content area, you can modify the .page-width class:

.page-width { max-width: var(--page-width); margin: 0 auto; padding: 0 1.5rem; /* add this to adjust the margin size */ margin: 2rem; }

Note that in the example above, the margin size has been changed to 2rem. You can adjust the value to whatever size you prefer.

- Was my reply helpful? Click "Like" to let me know!
- ----Was your question answered? Mark it as an Accepted Solution
You can get in touch with me via WhatsApp on +88013-13075440
Email: shahinkhan2424ft@gmail.com