Okay
  Public Ticket #376358
4 columns widget sizes
Closed

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

  •  8,848
    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

    ThemeNectar Support Team 

  • 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

  •  8,848
    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

    ThemeNectar Support Team 

  • JC replied
    February 20, 2015 at 10:43pm

    GREAT thank you, smart solution!