Footer widgets adjust width for mobile devices

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

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


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.

It worked!! Thank you <3 <3

You are welcome :slight_smile:

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