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

stellaa
Excursionist
38 0 7

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

Screenshot 2021-03-04 at 16.34.56.png

Website Access Details

https://sunnysixactive.com/

Password: heystella

0 Likes
Pallavi
Shopify Expert
1118 146 178

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;
}

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
0 Likes
KetanKumar
Shopify Partner
15907 1754 5860

@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;}

 

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
stellaa
Excursionist
38 0 7

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;

}

Screenshot 2021-03-05 at 08.40.14.png

0 Likes
KetanKumar
Shopify Partner
15907 1754 5860

@stellaa 

oh i see can you please try this code

body#contact .site-footer .page-width {
    max-width: 980px !important;
}
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes