Customize footer to have 4 equal columns

[Karlson Rapp]

Hi Bill,
We would like to have four equal columns in the footer section. I have tried to play around with the CSS to accomplish this but I end up with extra spacing on the right hand side. I wanted to know if you have a better solution? Should I set this up in the footer layout file or handle it with CSS?

Thanks,
Karlson

[Bill Robbins]

Hello Karlson,

You can arrange the footer widgets into four columns instead of three. Here’s how to go about that:

1. Go to your theme options page and choose the Advanced tab.
2. Scroll down to the Custom CSS box and add this:

   
   .widget iframe {
   	max-width: 100%;
   }
   
   @media only screen and (min-width: 1200px) {
   
   
   	#footer-sidebar .widget {
   		width: 245px;
   	}
   
   }
   
   @media only screen and (min-width: 1023px) and (max-width: 1199px) {
   
   	#footer-sidebar .widget {
   		width: 200px;
   	}
   
   }
   

3. Update your settings.

If you run into any questions or trouble, just let me know.[

Thanks,
Bill

[Karlson Rapp]

Hi Bill,
That was perfect! Worked like a charm! Thanks for the help!
Karlson

[Bill Robbins]

Anytime 🙂

[Author]

Posts