Footer widgets adjust width for mobile devices

Shapely
1

Hi! I would be immensely grateful for some help with our Shapely footer.
www.definingsystems.com

Currently I have this additional css to make the 2 widgets in use take up the full width of footer (Looks good on desktop):

#footer-area .container.footer-inner,
.footer-widget-area .footer-widget {
width: 50%;
margin: 0;
padding: 10px;
}

The issue is that on mobile, i need the text box (and the image box) to be 100% width. I want them to stack on top of each other, instead of what’s currently happening (see attached image).

Any tips for me? hands in prayer

-Jess

2

Hi There,

Thanks for reaching out to us.

You need to wrap this code within some media screen rules as follows.

@media screen and (min-width: 768px) {
#footer-area .container.footer-inner, .footer-widget-area .footer-widget {
    width: 50% !important;
    margin: 0;
    padding: 10px;
}
}

Let me know how it goes.

3

It worked!! Thank you <3 <3

4

You are welcome :slight_smile:

If you’re happy with our service, don’t forget to rate us: [Illdy] Reviews | WordPress.org