Footer widgets responsive

Hello!
I’d like to display the footer widgets on the ipad and iphone responsive versions. I manage to make the footer widgets appear by deleting the following in style.css
.footer-area {
display: none !important;
}
but can’t figure out how to make them appear one after the other instead of all squeezed into one row (with overlapping)…
I was pretty sure this below would work in style.css under @media screen and (max-width: 550px)
.footer-block{
float: none;
width: 100%;
}
but it doesn’t… I have tried substituting .footer-block for
.footer-box
.footer.widget.col
.widget-area
but none work and I can’t see other class/div for these…
Please, help me…
Thanks!