Docs

[Christopher]

Hi there,

Please update this code :

footer.x-colophon.bottom {
width: 100%;
max-width: 1000px;
margin: 0 auto;
}
.x-colophon.top {
width: 86% !important;
max-width: 1000px !important;
margin: 0 auto !important;
}

To :

footer.x-colophon.bottom,.x-colophon.top {
    width: 86%;
    max-width: 1000px;
    margin: 0 auto;
}

Hope it helps.

[s_gogos]

Thanks.
Now everything shows up OK
BUT
not my homepage!

See the screenshot…

[Joao]

Hi There,

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thanks

Joao

[s_gogos]

This reply has been marked as private.

[Joao]

Hi There,

Please update the code you have on Appereance > Customizer > Custom > CSS to:

footer.x-colophon.bottom,.x-colophon.top {
    width:100%;
    max-width: 1000px;
    margin: 0 auto;
}

Hope that helps

Joao

[s_gogos]

Thank you!
I think the problem is solved.

[Nico]

Happy to hear that.

Feel free to ask us again.

Thanks.

[s_gogos]

Hello,

Unfortunately it’s not… 🙁
I’ve attached another screenshot.

The problem is that for some reason the footer (with the footer widget) doesn’t obey to the codes you give me.
The code fixes either my home page or my blog page and my posts.
Not both!

With the last code you gave me, the problem is fixed on my home page but not on the blog and the individual posts.
So now the home page appears boxed and OK but on the blog and the posts the footer area is boxed only in screens bigger than 1000px.
If the screen has length smaller than 1000px, lets say 500px, the footer will take its max width and won’t go the same width with the rest of the page!

This is the code I’m using now:

footer.x-colophon.bottom,.x-colophon.top {
width:100%;
max-width: 1000px;
margin: 0 auto;
}

[Paul R]

Hi,

To fix it, you can add this under Custom > Edit Global CSS in the Customizer.

@media (max-width: 1200px) {
footer.x-colophon.bottom, 
.x-colophon.top {
    width: 86% !important;
}
}

Hope that helps.

[s_gogos]

No, it didn’t.
Now the footer looks like this (see attached)

[Nabeel A]

Hi again,

Please add the following code in your Customizer via Appearance > Customize > Custom > Edit Global CSS:

(function($) {
   $('.x-colophon.top').insertAfter('.x-container.max.width.offset');
   $('.x-colophon.bottom').insertAfter('.x-colophon.top');
})(jQuery);

Let us know how this goes!

[s_gogos]

Hi,

Did you check this code on my site and it works fine??
Because to me it doesn’t work.
Probably this is my home page only (in your screenshot).
Because when I put the code you told me, my blog page (where my new posts go) and also all my blog posts appear like this (see the attachment) :

I’ve cleared the cache etc…

Should I leave the code you gave me in the previous messages as well?

[Rad]

Hi there,

I just checked your site and it’s working. Please clear your browser cache before testing.

Thanks!

[s_gogos]

You just sent me a screenshot of my home page and as I’ve told you the problem isn’t my homepage!

The problem is on my blog page and on my posts!

Also I’ve cleared my browser cache.

Please check my blog page and my posts. The footer in these pages doesn’t appear boxed but full width!

Am I doing something wrong with the page layouts or something?

[Paul R]

Hi,

You can add this under Custom > Edit Global CSS in the Customizer.

body .x-colophon.top,
body .x-colophon bottom {
    margin: 0 auto;
    width: 86%;
    max-width: 1000px;
}

body .x-colophon.top .x-container.width,
body .x-colophon bottom .x-container.width {
   width:100%;
}

Hope that helps

[Author]

Posts