0 Kč s DPH

Úprava sloupců v šabloně ONE a SLIDE

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*/

}

Tým inPage
inpage(zav)zoner.cz

Přidat komentář

inPage.cz - webové stránky, doména a webhosting snadno.