Footer cols

Support
#1

Hi,

How can I edit/make the 2nd col width as this? My site URL in notes.

Thanks

#2

Hi There,

To achieve that, please add this custom CSS under Theme Options > CSS:

@media (min-width: 980px){
    footer.x-colophon.top .x-column.x-md.x-1-4 {
        width: 24%;
    }
    footer.x-colophon.top > div > div:nth-child(2) {
        width: 14% !important;
    }
}

Hope it helps :slight_smile:

#3

Yeah worked! Thanks

Could you let me know how can I change the widget title icons?

Thanks in advance. :smile:

#4

Is there a way that I could add the same width for the 3rd footer as well? Same for 2nd and 4rd?

#5

Hello There,

Thanks for updating in!

1.) To change the widget title icons, please add this JS code in the Theme Options > Global JS (http://prntscr.com/evswzb)

.widget_text .h-widget:before {
    content: "\f101";
}

If you want to replace the icon, please get the icon code from this page: https://fontawesome.com/cheatsheet

2.) You will have to make sure that the total width of the 4 columns must not exceed 100%. You can update the code and use something like this:

@media (min-width: 980px){
    footer.x-colophon.top .x-column.x-md.x-1-4 {
        width: 30%;
    }
    footer.x-colophon.top > div > div:nth-child(2), 
    footer.x-colophon.top > div > div:nth-child(3) {
        width: 14% !important;
    }
}

We would loved to know if this has work for you. Thank you.

#6

Thank you so much! :thumbsup:

#7

You are most welcome!

#8

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.