Navigation and Footer alignment in purchased template

SOLVE
Jlawal
Top Contributor

Hello,

 

I am having some issues with the alignment of my navigation and footer.

 

This is the page in question and this is how it should look (centered).

 

Any help would be greatly appreciated.

 

Thanks,

 

Jamila

0 Upvotes
1 Accepted solution

Accepted Solutions
Jsum
Solution
Key Advisor

Hey @Jlawal,

 

Your page center styling disappeared.  I know you had it before, maybe you need to switch to an older revision of your css?

 

@jestlinbaum,  hubspot's css sets a float and a left margin on it column wrappers. margin: 0 auto !important; won't reset the margin-left: 0 !important; that is set by Hubspot. What I always do is:

page-center {
    float: none !important;
    margin-left: auto !important;
    margin: 0 auto;
}

that ensure that the float is overwritten and also the margin left. 

View solution in original post

0 Upvotes
7 Replies 7
jestlinbaum
Participant

For the header, i think you just need to modify this css:

.header-container .page-center {
    max-width: 1150px !important;
}

to include:

.header-container .page-center {
    max-width: 1150px !important;
    margin: 0 auto!important;
    float: none;
}

and for the footer, it looks like you have a bunch of divs nested inside each other with the class of .footer-container . You may want to look into that. However,  your inner-most nested .footer-container has inline styling of width970px;. You should be able to add the margin and float properties to that as well.

0 Upvotes
Jsum
Solution
Key Advisor

Hey @Jlawal,

 

Your page center styling disappeared.  I know you had it before, maybe you need to switch to an older revision of your css?

 

@jestlinbaum,  hubspot's css sets a float and a left margin on it column wrappers. margin: 0 auto !important; won't reset the margin-left: 0 !important; that is set by Hubspot. What I always do is:

page-center {
    float: none !important;
    margin-left: auto !important;
    margin: 0 auto;
}

that ensure that the float is overwritten and also the margin left. 

View solution in original post

0 Upvotes
jestlinbaum
Participant

@Jsum,

Noted. Thank You!

0 Upvotes
Jlawal
Top Contributor

Hi @Jsum

 

Thank you for replying! I have two stylesheets attached to this page:

The 1st is the templates stylesheet and the 2nd one is the header and footer styling taken from our websites main stylesheet. Is it the 2nd one that needs the page-styling or has it been removed from the 1st stylesheet?

 

Many thanks,

 

Jamila

 

0 Upvotes
Jsum
Key Advisor

@Jlawal,

 

The page is looking right now so you must have done something to fix it. 

 

When I went to the page before, used the inspector, and chose the page center wrapper around the header, and then the footer, there were no styles set to center it. I couldn't really say if or why the stylesheets were not applying the code to the wrapper around your header and footer. It looks like it is working now though. 🙂

0 Upvotes
Jlawal
Top Contributor

@Jsum

 

You're right! I wish i could take credit for it but i don't think it was me!

 

The fairies must have done it haha.

 

Thank you again - your input is always appreciated!

0 Upvotes
Jsum
Key Advisor

Anytime!

0 Upvotes