Archived topic

full width footer widgets ipad/tablet

5 replies · Started by Alex on May 8, 2019

Viewing posts 1–6 of 6

May 8, 2019 at 5:17 am #892710

Hi team GP,

Currently the three widgets in the footer of my site stack and display full width on mobile, full width and looking great, is there any way for me to have this happen on an iPad/tablet when it's upright?

Currently the widgets stack but aren't full width and are left aligned which doesn't look great.

Any help gratefully received,

Thanks,

Alex

May 8, 2019 at 7:59 am #892986

Hi there,

Can you first clearing and disabling W3 Total Cache as we suggested in the open a new topic checklist?

Thanks.

May 8, 2019 at 8:07 am #893002

Hi Leo,

Have done that now,

Thanks,

May 8, 2019 at 9:22 am #893109

So currently it's stacked when the screen width is below 768px.

I don't think there is enough space for 3 inline footer widgets below that.

What if we center them when they are stacked?

@media (max-width: 768px) {
    .footer-widgets {
        text-align: center;
    }
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

Let me know :)

May 9, 2019 at 12:23 am #893735

Thanks Leo,

That's in now but in the Chrome inspector, when set to portrait iPad view, it's still left aligned -

https://www.dropbox.com/s/etusjxv3f7psnqu/Screenshot%202019-05-09%2009.21.53.png?dl=0

Also, is it possible to center align the social icons as well?

Thank you!

May 9, 2019 at 8:06 am #894245

It all looks left aligned to me except for the social icons.

You can center them at that width like this:

@media (max-width: 768px) {
    .lsi-social-icons {
        text-align: center !important;
    }
}

This archived topic is closed to new replies.

Start building better websites today.