How do I set margins for my header and footer?

Store Design
1

Hello,

My whole store is bound by margins except my header and footer and they look super spaced out and awkward on large screens. How can I set the same margins as page content/body?

https://www.urbanframes.ae/

Thank you in advance.

Nadim

2

@nadimnahas Can you please be more specific about your requirement, Where do you want the margins? A screenshot would be great to understand your requirements.

3

Hi Marvic,

Thanks for the reply. Attaching screenshots below. I want the header and footer margins to be within the red lines roughly (same margins as the body - check second screenshot). Everything seems to be aligned to those except the header and footer.

Screenshot 2022-02-22 202158.png
Screenshot 2022-02-22 202158.png1920×1080 745 KB

Screenshot 2022-02-22 202245.png
Screenshot 2022-02-22 202245.png1920×1080 864 KB

4

add this code to your style.css file.

Navigate to online store >> Click edit theme code.

Now find style.css and paste the following code:

#shopify-section-header,
#shopify-section-footer{
    max-width: 1480px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 40px !important; 
    padding-right: 40px !important;
}
1 Like