Docs

[SixIT]

Hi there,

I’ve been through your forum and I wanted to centre footer widgets on mobile devices and remove two text footer widgets on mobile devices (It clutted the footer too much on mobiles).

I added this code:

1. To remove text widgets on mobile devices:

@media (max-width: 979px){
#text-3.widget.widget_text,
#text-4.widget.widget_text * {
display: none;

}

2. To center the remaining text widgets on mobile devices:

@media (max-width: 979px){
    .x-colophon.top .x-column .widget {
        text-align: center !important;
    }

This did achieve the desired effect, however it completely messed up my woocommerce shop, shifting every product to the left rather than having 3 products on a line (please see screenshot).

I’ve taken the code out for now, but I’m pretty sure it’s something to do with the media queries, any help you can provide would be amazing as it’s really got me stumped!

My URL is https://yorkshirewildlifepark.com/

Thanks in advance!

[Joao]

Hi There,

To center the content you can use the following code:

@media (max-width: 979px){
.x-colophon.top p {
text-align: center;
font-size: 25px;
}
.x-colophon.top, .x-colophon.top h5, .h5  {
text-align: center;
font-size: 35px;
}
}

Regarding you media queries they might work, but you need to close with two curly brackets.

To hide the widgets:

@media (max-width: 979px){
.x-colophon.top {
display: none;
}
}

Hope that helps,

Joao

[SixIT]

Haha well I feel bloody stupid now, thanks Joao, that’s solved it!

[Joao]

Everyone of us feel like this sometimes 🙂

I am glad we managed to help you.

Let us know if we can help you with anything else.

Joao

[Author]

Posts