[Resolved] Footer with 4 widgets does not react to tablet screen size

[Klaus]

Hi there,

I have tried to find some solution and also played around with the css code that I found under “additional CSS” so far. But I did not manage to find a solution…

The problem is, I have 4 widgets in my footer. All are in one line horizontally at the desktop screen and all are in one line vertically on mobile screen. If I now switch to the tablet screen the page sticks to the desktop variant and I can not see my 4th widget. This behaviour is not restricted to the home page only. When I am viewing a post, it is the same.

Can you help me to fix that?

The code I played around with in original version:
`/* footer widget area custom widths */

@media (min-width:1025px) {
.footer-widgets .footer-widget-1 {
width: 45%;
padding-right: 20px
}
.footer-widgets .footer-widget-2 {
width: 30%;
text-align: center;
}
.footer-widgets .footer-widget-3 {
width: 25%;
text-align: center;
}
}

@media (max-width:1024px) {
.footer-widgets .footer-widget-1,
.footer-widgets .footer-widget-2,
.footer-widgets .footer-widget-3
{
   width: 100%;
text-align: center;
}
}

[David]

Hi there,

as you’re using GenerateBlocks in those widgets and it doesn’t look like you need any classic widgets – why not remove the theme footer widgets by setting them to 0 in Customizer > Layout > Footer.

And then use a Block Element to build your own Footer:

https://docs.generatepress.com/article/block-element-overview/

You can see Leo do a breakdown of one of our site library footers in this YouTube:

[Klaus]

Hi David,

thank you for that suggestion. It is working perfectly now.

[David]

Glad to hear that!!

[Author]

Posts