"4 columns widget sizes" (#376358) / ThemeNectar

Comments

JC started the conversation
February 19, 2015 at 11:49am
how do i achieve a 4 column widget with custom widths
20 / 30 / 20 / 30
with a 3% padding on the first and second column and no padding on the last two

9,338

Tahir replied

February 19, 2015 at 1:23pm

Hey!

Add this into the Custom CSS box located in your Salient Options panel :

#footer-widgets .span_3:nth-child(1) {
    width: 20%;
}


#footer-widgets .span_3:nth-child(2) {
    width: 30%;
}


#footer-widgets .span_3:nth-child(3) {
    width: 20%;
}


#footer-widgets .span_3:nth-child(4) {
    width: 30%;
}


#footer-widgets .col:nth-child(1) {
    padding-right: 3% !important;
}


#footer-widgets .col {
    padding-right: 0% !important;
    margin-right: 0%!important;
}

Thanks

Salient Support Team | Say Hello!

JC replied
February 19, 2015 at 11:35pm
Than you, it works well for desktop but now the responsive isn't stacking up
can you please help

http://parklandplayers.ca

9,338

Tahir replied

February 20, 2015 at 3:39pm

Hey Again!

You can wrap them in a media query like this:

@media only screen and (min-width: 1000px) {
    #footer-widgets .span_3:nth-child(1) {
        width: 20%;
    }
    
    
    #footer-widgets .span_3:nth-child(2) {
        width: 30%;
    }
    
    
    #footer-widgets .span_3:nth-child(3) {
        width: 20%;
    }
    
    
    #footer-widgets .span_3:nth-child(4) {
        width: 30%;
    }
    
    
    #footer-widgets .col:nth-child(1) {
        padding-right: 3% !important;
    }
    
    
    #footer-widgets .col {
        padding-right: 0% !important;
        margin-right: 0%!important;
    }
}

Best,

-T

Salient Support Team | Say Hello!

JC replied
February 20, 2015 at 10:43pm
GREAT thank you, smart solution!