Resize the Footer 4 Columns

8 posts from 3 voices

• Started 9 months ago by lhnbmx
• Latest reply from Ismael
• This topic is closed
• This topic is resolved

Tags:

No tags yet.

1. 

   lhnbmx
   Member

   I want to make my footer columns' width to 120px 180px 300px 300px, how to do this? thx

   Posted 9 months ago #
2. 

   Devin
   Moderator

   Hi lhnbmx,

   First you'll need to remove the width of the one_fourth grid block. Then add the width for each of the specific widgets inside the 4 blocks so that they take up the specific space. You can over-ride the width by adding the following CSS to your Quick CSS (located under the Styling Tab in the theme options) or the custom.css file in the css folder of your theme files:
   

   #footer .one_fourth {
   width: auto;
   }

   Then you'll need to specify the width by adding some additional css based on your specific set up. Without taking a look at your site I can only give a bit of generic css but you can modify it by inspecting your widgets and picking out the classes or ID's you need.

   #footer .widget.widget_pages {
   width: 180px;
   }

   Where .widget.widget_pages is the widget class specifically holding the page list .

   Regards,

   Devin

   Posted 9 months ago #
3. 

   lhnbmx
   Member

   Thank you very much. I have four footer Columns. I want to make them width first is 120px, second is 180, the rest of them are 300px. What should i have in my css?

   Posted 9 months ago #
4. 

   lhnbmx
   Member

   I have removed the width of the one_fourth grid block of style.css. And add these below to my custom.css. But they not works.

   #footer .one_foulth.first {
   width: 10%;
   }

   #footer .one_fourth {
   width: 20%;
   }

   #footer .one_fourth {
   width: 20%;
   }

   #footer .one_fourth {
   width: 40%;
   }

   Posted 9 months ago #
5. 

   lhnbmx
   Member

   I just want to make my footer columns looks like quintinco.com footer columns. Please tell me how to do this. Thx.

   Posted 9 months ago #
6. 

   Ismael
   Moderator

   Hello,

   You can do something like this

   #footer .container .one_fourth.first {
   width: 120px;
   }
   
   #footer .container .one_fourth:nth-child(2) {
   width: 180px;
   }
   
   #footer .container .one_fourth:nth-child(3) {
   width: 300px;
   }
   
   #footer .container .one_fourth:last-child {
   width: 300px;
   }

   Regards,
   Ismael

   Posted 9 months ago #
7. 

   lhnbmx
   Member

   Hi, Ismael

   It works perfectly. Thanks for your help!

   Posted 9 months ago #
8. 

   Ismael
   Moderator

   Hi lhnbmx,

   Glad that I could help. :)

   Cheers,
   Ismael

   Posted 9 months ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.