Úprava sloupců v šabloně ONE a SLIDE

14. 1. 2016

V dnešním článku si ukážeme, jak v šabloně ONE a SLIDE upravit šířku sloupců a umístění postranního sloupce v rámci vlastních CSS stylů.

Úprava šířky sloupců

Šířka sloupců je dána mřížkovým systémem, o kterém jsme psali v článku Dlaždice na úvodní stránce. S níže uvedeným CSS kódem jednoduše tuto šířku obou sloupců upravíme.

Kód stačí zkopírovat, vložit do vlastního CSS a upravit procentuální hodnoty.  Důležité je, že musíme hlídat hodnoty pro posunutí a šířku sloupců. Dohromady musí vždy dávat 100% a hodnota posunutí sloupce se musí shodovat s šířkou sloupce druhého. 

@media (min-width: 992px) { /*zobrazení pro malý notebook*/
 
 aside.col-md-pull-8 {right: 72%;} /*posunutí postranního sloupce vlevo*/
 main.col-md-push-4 {left: 28%;} /*posunutí hlavního sloupce vpravo*/


 aside.col-md-4 {width: 28%;} /*šířka postranního sloupce */
 main.col-md-8 {width: 72%;} /*šířka hlavního sloupce*/

}


@media (min-width: 1200px) { /*zobrazení pro monitor*/
 
 aside.col-lg-pull-9 {right: 75%;} /*posunutí postranního sloupce vlevo*/
 main.col-lg-push-3 {left: 25%;} /*posunutí hlavního sloupce vpravo*/

 aside.col-lg-3 {width: 25%;} /*šířka postranního sloupce */
 main.col-lg-9 {width: 75%;} /*šířka hlavního sloupce*/

}

Prohození sloupců

Sloupce můžeme také jednoduše mezi sebou prohodit. Stačí vynulovat hodnoty pro posunutí sloupců tak, jak je vidět na kódu níže.

@media (min-width: 992px) { /*zobrazení pro malý notebook*/ 

 aside.col-md-pull-8 {right: 0%;} /*posunutí levého sloupce vlevo*/
 main.col-md-push-4 {left: 0%;} /*posunutí pravého sloupce vpravo*/

 } 


@media (min-width: 1200px) { /*zobrazení pro monitor*/

 aside.col-lg-pull-9 {right: 0%;} /*posunutí levého sloupce vlevo*/
 main.col-lg-push-3 {left: 0%;} /*posunutí pravého sloupce vpravo*/

}