Footer with 4 widgets does not react to tablet screen size

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;
}
}