How to Change Max Width and Corner Radius of Header and Footer

[insideyagolf]

I am attempting to create a bento grid layout for my Shopify store. I am using the Dawn theme and have a simpler design published at the moment as I attempt to create this layout in a copied version. I would like to change the corner radius on all sides of the header and footer to 16px. I also would like my content to be the same width as my other elements, 160rem. I can include a link to my current website but will be editing the code of the copied website. 

https://www.insideyagolf.com/ 

[Made4uo-Ribe]

Hi @insideyagolf 

Do you mean like this?

If it is try this one. 

1. From your Shopify admin dashboard, click on "Online Store" and then "Themes".
2. Find the theme that you want to edit and click on "Actions" and then "Edit code".
3. In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

.footer.section-sections--18057307652236__footer-padding {
    max-width: var(--page-width);
    margin: 5rem auto;
    border: 1px solid black;
    border-radius: 16px;
}

sticky-header.header-wrapper.color-scheme-1.gradient.header-wrapper--border-bottom {
     max-width: var(--page-width);
    margin: 1rem auto;
    border: 1px solid black;
    border-radius: 16px;
}

• And Save.

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better! 

[insideyagolf]

This is how I would like it to look, however when I add and save the code it doesn't seem to work. 

 

  

[Made4uo-Ribe]

when I check your base.css file this code is not belong on the base.css. 

relocate this code on the theme.liquid. before the tag </body>. 

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better! 

[insideyagolf]

I got it to work for the header although it is still a lot wider than the other sections. It is not working for the footer. I am going to publish the version I am working on so you can see the code. 

https://www.insideyagolf.com/

[Made4uo-Ribe · Accepted solution]

I edit the code, please replace. 

Yes, the header and footer have different widths in your section. Would you like them to be exactly the same? Having same widths might confuse users.

You can chnge the max-width: 150rem.Since the both sides have 5rem padding. 

.footer.section-sections--18057307652236__footer-padding {
    max-width: 150rem;
    margin: 5rem auto;
    border: 1px solid black;
    border-radius: 16px;
}

sticky-header.header-wrapper.color-scheme-1.gradient.header-wrapper--border-bottom {
     max-width: 150rem;
    margin: 1rem auto;
    border: 1px solid black;
    border-radius: 16px;
}

And Save. 

Result:

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better! 

[insideyagolf]

Perfect, thank you so much!