Serpent.

Építs portált egyszerűen!
Ugrás a tartalomhoz
  • Before és After

    Before és After – Előtte és Utána. Ez a két dolog CSS -ben igazán hasznos tud lenni, sőt. Segítségével tartalmat fűzhetünk az adott elem elé / mögé HTML használata nélkül. A tartalmat a content -tel tudjuk megadni: p::before{ content: “Előtte “; } p::after{ content: ” Utána”; } Előtte   Ez a tartalom   Utána Ez lenne az […]

  • Mit NE csinálj design készítésekor

    Az aktuális trendek szinte mindig változnak, beszéljünk akár divatról, tévéműsorokról vagy akár sablonkészítésről. Ezek ugyan mindig változnak, de ha úgy vesszük, pár “aranyszabály” mindig van. Most ezekről szeretnék mesélni nektek, konkrétabban arról, hogy mit tartok mai szemmel nagy hibának design készítésekor. Egyébként, készítettem egy új projektdobozt, amit itt(link) tudtok meglesni 🙂 Betűtípusok Nehéz lehet megtalálni […]

Reszponzív G-portál

Ma már minden oldalnál elengedhetetlen a reszponzív kinézet, és ez lassan már G-portálos lapoknál is igaz. Mindenki szeret a mobilján netezni és elég idegesítő, ha egy oldal nem illeszkedik a képernyőhöz. Most azt szeretném megmutatni, hogyan lehet G-portálon reszponzív az oldalad.

Először is, szükségünk lesz hozzá media querie -re CSS -ben. Ez fogja nekünk megmondani, hogy ha az oldalunk kisebb mint mondjuk 600px, akkor hogyan is nézzen ki a weblap. Az a CSS, amit megírtunk attól persze még ugyanúgy érvényes lesz, csupán ezzel könnyen átírhatjuk kisebb képernyőhöz is.

A bejegyzés a tovább mögött folytatódik…

@media only screen and (max-width: 600px) {
}

Ez a max-width a töréspontunk. Ha kisebb az oldalunk a töréspontnál, akkor “aktiválódik” az ezen belül elhelyezett CSS rész. Mobiloknál ez a töréspont általában 600px, míg tableteknél 768px. Célszerű mindkettőre külön-külön stílusrészt írni, de az sem baj, ha nem teszed és a tablet és a mobil kinézet ugyanaz.

Ha táblagépre és telefonra is külön készítenéd:

@media only screen and (max-width: 768px) and (min-width: 601px){
}

@media only screen and (max-width: 600px)){
}

De ha mondjuk táblegépen és mobilon is ugyanúgy akarod megjeleníteni, akkor elég így:

@media only screen and (max-width: 768px){
}

Ez mind szép és jó, de ettől még hogyan lesz reszponzív az oldalam? Nos, flex -el.

@media only screen and (max-width: 600px) {

.site.sitemain > tbody > tr {
display: flex !important;
width: 100% !important;
flex-wrap: wrap !important;
margin: auto !important;
}

.site.sitemain > tbody > tr > td,
.column_side,
.column_main{
width: 100% !important;
display: block !important;
}

}

Fontos, hogy mindenkép a meda querie -n belül kell elhelyezkednie a kódnak! Az oldal tartalmi részénél flex -t fogunk használni. A főmodul és az oldalsáv hossza 100% lesz, így kényelmesen el lehet olvasni a tartalmát mobilon is. Ha pedig bal oldalsávot fogsz használni, akkor a . site.sitemain > tbody > tr -hez még ezt kell hozzáírni: flex-direction: column-reverse;

És már kész is a reszponzív G-portálos oldalad. Így néz ki (az oldalon persze nem használtam más CSS kódot):

Asztalon…

… és mobilon

Devin
2020, május 22

Oszd meg az simerőseiddel

Vélemény, hozzászólás?

Az email címet nem tesszük közzé. A kötelező mezőket * karakterrel jelöltük