How to stop Footer width from changing after adjusting with page width?

[stellaa]

Hi there! I've recently been increasing the width of my pages to accommodate certain designs. However I noticed that this adjusts the width of my footer and navigation bar as well. How do I keep them in their proper measurements? Thanks!

This is a sample of the code I use to stretch page width for select pages:

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

}

 Image Sample

Website Access Details

https://sunnysixactive.com/

Password: heystella

[Pallavi]

Hello There,

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

.site-header-sections.page-width,
.site-footer .page-width{
max-width: 980px;
}

[KetanKumar]

@stellaa 

Thanks for post can you please try this 

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

.page-width {max-width: 100%;}
.site-footer .page-width {max-width: 980px;}

[stellaa]

Hi @KetanKumar 

For some reason it stays like this on the contact page. I tried using this code below but no luck

body#contact .site-footer .page-width {
  
  max-width: 980px;

}

 

[KetanKumar]

@stellaa 

oh i see can you please try this code

body#contact .site-footer .page-width {
    max-width: 980px !important;
}