How to edit footer width for a specific page? Narrative Theme

Store Design
1

Hi there! I’m trying to fix this footer that’s getting messed up due to the content width stretching. I want to stretch the content width but maintain the footer width. Please note that it is only specifically happening on the “about-us” page (as shown below)

Is there any way I can solve this?

{% if page.handle == "about-us" %}

{% endif %}

You may refer to the image below as a reference:

Screenshot 2021-04-21 at 20.39.14.png
Screenshot 2021-04-21 at 20.39.14.png999×336 81.8 KB

If you’d like to inspect the element, you can access this directly on: https://sunnysixactive.com/pages/about-us :slightly_smiling_face:

No password is needed to access it!

Thanks so much!

1 Like
2

@stellaa

sorry for this issue please try this code add parent div ID

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.
#about-us .main-content .page-width {
padding: 0px !important;
margin-left: 50px !important;
  margin-right: 50px !important;
  max-width: 100% !important;
}
  
 #about-us  .section-header {
    display: none!important;
    
   
}
  
#about-us  .site-footer .page-width {
    max-width: 100%;
  }
3

hi @KetanKumar .

unfortunately this is still not working.

i realized i didn’t specify this- want content width to be 100%, but i want footer width to remain to 980px.

I want it to look like the footer on this page :

sample of footer at 980px, aligned to the center
sample of footer at 980px, aligned to the center2880×848 137 KB

1 Like
4

@stellaa

oh i see no issue please add this code

#about-us .site-footer .page-width {
    max-width: 980px !important;
    margin: 0px auto !important;
}
1 Like
5

works like a charm. thanks as always, @KetanKumar !

1 Like
6

@stellaa

it’s my pleasure to help us