You are here:Home»KB»Web Design»Design Elements, Styling, Effects and Code»Joomlashine»Grid columns in Footer
Friday, 27 January 2017 13:09

Grid columns in Footer

Written by

This allows me to use joomlashine <div class="grid-layout"></div> in the footer. This code was used in the JSN Dona template would I am sure is the same for all of the other templates. It is great for adding in modules or mutliple menus.

/*-- Grid columns in Footer --*/

/* grid columns get squashed in footer */
div#jsn-pos-footer {
    width: 100% !important;
}

/* set min width for grid layout */
/* #jsn-footer div.grid-layout4 div.grid-col, - for reference only */
#jsn-footer div[class*="grid-layout"] div.grid-col {
	min-width: 200px;
}

/* note this is the total width of the columns -1px */
@media only screen and (max-width: 799px), (max-device-width: 799px) {
    #jsn-footer div[class*="grid-layout"] div.grid-col {
        width: 100%;
        
    }
    /* centers all items */
    #jsn-footer div[class*="grid-layout"] div.grid-col_inner {   
        text-align: center;
    }
    /* centers social icons - i also could add text-align: justify; to the custom html code */
    #jsn-footer #jsn-social-icons ul li a {	
        text-align: center;
    }
}

/* fix for column min height  custom.css 2378 */
@media only screen and (max-width: 768px), (max-device-width: 768px) {
    div.grid-layout4 div.grid-col {
        min-height: 1px;
    }
}

 

Read 1088 times