Docs

[Lance B]

We had never used the footer widgets before, but we decided to turn them on, and they look awesome on the desktop, but when on an ipad they are all stacking when they should still fit horizontally, and then when on a phone we’d like to know how to center them. Screenshots are attached, and you can see for yourself at advancedbiology.com

I’m pretty sure that something is wrong on the ipad stacking thing, and I’m pretty sure you’ve given some css that makes them center in small mobile before on the forum but I can’t seem to track it down.

Thank you so much you guys!!!

[Nabeel A]

Hi there,

Thanks for writing in!

To fix it for iPad, you can add the following code in your Customizer via Appearance > Customize > Custom > Edit Global CSS:

@media screen and (max-width: 979px) {
.x-column.x-md {
    float: left !important;
    width: 45% !important;
    margin-right: 4% !important;
}
}

For mobile devices, you can use this code:

@media screen and (max-width: 480px) {
.x-column.x-md {
    float: none !important;
    width: 60% !important;
    margin: 0 auto !important;
}
}

Let us know how this goes!

[Lance B]

Added that and it didn’t make any difference at all?

[Thai]

Hi Lance,

Please add the following CSS instead:

@media screen and (max-width: 979px) {
    .x-colophon.top .x-column.x-md {
        float: left !important;
        width: 45% !important;
        margin-right: 4% !important;
    }
}
@media screen and (max-width: 480px) {
    .x-colophon.top .x-column.x-md {
        float: none !important;
        width: 60% !important;
        margin: 0 auto !important;
    }
}

If it doesn’t help, please provide us with your admin account so we can take a closer look.

Thank you.

[Lance B]

This reply has been marked as private.

[Rupok]

Hi there,

Thanks for updating. Your login page throwing 404 and I am not sure what you meant by “you may have to login a second time there”. The login page is not coming at all so there is no way to login. Also /wp-admin and /wp-login.php not working as you have changed those.

Kindly provide the exact login page that works.

Cheers!

[Lance B]

This reply has been marked as private.

[Rupok]

Hi there,

I got it and was able to login. However the code seems working fine but you have some glitch on your previous code above that which is preventing the code to be generated correctly. I have tested with http://csslint.net and fixed some errors. You need to still fix an error as I am not sure about this. In line 121, you have opened a media query that didn’t close anywhere. You need to close this with right curly brace wherever you are supposed to close.

Let’s fix this and the code will work fine.

Cheers!

[Lance B]

In order to text this code I simply put it in the top of the custom CSS (the unclosed css is part of some other code you guys gave me and I’m tracking that issue down, but putting this in the beginning gets it rendered first). So it has an effect, but if you look at the attached, you can see that on a pad, it is creating a weird space at the top of the second column, otherwise that would work fine. And on the small mobile screen it’s not centering the content, otherwise it would work.

[Nabeel A]

Hi there,

For iPad, you can use this code:

@media screen and (max-width: 768px) {
footer .x-column.x-md.x-1-4:nth-child(3) {
    clear: both !important;
}
footer .x-colophon .widget {
    margin-top: 25px !important;
}
}

For mobile devices, try this code:

@media screen and (max-width: 480px) {
footer .x-container.max.width {
    text-align: center !important;
}
}

Let us know how this goes!

[Author]

Posts