Changing the footer columns at small screen width

I want to make the footer two small columns on a mobile device instead of one. i just seem to have a lot of white space otherwise -
could anyone advise where i create the css for this - as far as i see once it drops below 768 it changes to one col-lg-12

You can change classes for each widget section here.

Personally, I would add a duplicate sidebar for the second column (duplicating the register_sidebar code for the footer sidebar) and then keep the markup in the template itself.

I dont think I explained well enough - main layout is four column widgetized footer - its already set up in the way you linked above -

just the col-sm-3 collapses at 768px to full width.

however I did work out that all i had to do was change the width percentage and float it left again and it was all fine!

There’s extra small columns (col-xs-*) for grids under 768px. Check the Bootstrap docs for more details.

1 Like