Footer builder responsiveness is too good

[dmdstar]

I have been fighting with this footer builder for a month trying to get this to work, so finally asking for help. I have “Wrap Children” enabled on the primary row with widget areas in each column. The problem is that I really would like to have the columns squish together a bit more than they do in smaller browser widths, but at less than 1500px, it drops the 4th column down. For example, I think we could still get away with four columns on laptop & tablet widths, but would like it to break them apart on the mobile width. I’ve messed with all the settings I know how to mess with, but can’t seem to figure out how to get it to behave how I’d like.

My dev site: https://bmz.startecwebs.com

Thanks,
Matt

[basanta]

Hi There,

Thanks for writing in in!

If I understand it properly, you want only wrap the children elements in mobile device.
For that you need to disable the “Wrap Children” option for the container and add your own media query CSS to the container.

You can assign a class name and add the following CSS header css or element CSS.

@media (max-width: 650px)
.custom-class {
   -webkit-flex-wrap: wrap; /* Safari 6.1+ */
    flex-wrap: wrap;
}
}

Hope this will help to manage your breakpoint.

Thanks

[dmdstar]

Thanks for the quick response, but the media query doesn’t seem to work. I disabled wrap children and added a class of “footer-widgets” to the bar, then set the media query for .footer-widgets with the code as above, but it doesn’t wrap at all, so that doesn’t seem to be taking. Even tried it with !important.

[basanta]

Hi There,

Thanks for the confirmation!

Can you please try below CSS instead of the above.

@media (max-width: 650px) {
.footer-widgets .x-bar-content {
    flex-direction: column;
    -webkit-flex-direction: column;
}
}

Thanks

[dmdstar]

That one might work if I can figure out the best width to drop it (650 isn’t quite right), but that’ll take some playing around to figure that out. Though I was hoping that we could wrap them 2x2 at a certain point rather than just switching to 1 column.

[albrecht]

Hi There,

Can you try this css.

@media (max-width: 750px){
    .footer-widgets .x-bar-content {
        flex-direction: row;
        -webkit-flex-direction: row;
        flex-wrap: wrap;
    }

    .footer-widgets .x-bar-content .x-bar-container {
        flex: 0 0 45%;
    }
}


@media (max-width: 600px){
    .footer-widgets .x-bar-content {
        flex-direction: row;
        -webkit-flex-direction: row;
        flex-wrap: wrap;
    }

    .footer-widgets .x-bar-content .x-bar-container {
        flex: 1 0 100%;
    }
}

Hope it works.

[dmdstar]

I was just able to try this, and it worked perfectly! Thank you so much. I wish I asked earlier, but always try to figure things out myself. This was just eluding me. I really appreciate the quick responses and effective fix to my issue.

[basanta]

Glad that we could able help You!

Thanks