BoP #13: Poprawki CSS

W naszym CSS’ie znalazło się kilka „błędów” dlatego wprowadzimy drobne poprawki CSS.

 

Poprawki CSS

Zacznijmy od szerokości strony – o ile na Codepen.io wszystko wyglądało ok (przy układzie gdzie panele miałem z lewej strony a strona było po prawej) tak teraz strona jest za szeroka. 

 

Musimy sobie dla <div id=”content”> dodać:

  • max-width ograniczy nam maksymalną szerokość strony do 1200px
  • margin-left i margin-right wycentrują te elementy

 

Dla <header> dodamy to samo tylko margin-left i -right połączymy z marginem, który już jest tam dodany:

 

Musimy też poprawić wygląd dla wersji mobilnej – w naszym przypadku będzie to rozdzielczość poniżej 750px. Mamy do wyboru różne opcje – sidebar może np. pojawić się nad lub pod postami albo jako wysuwany panel. My przeniesiemy go pod posty, bo posty to jest nasza główna zawartość i chcemy by to na nich skupiali się użytkownicy.

Zaczynamy od dodania sobie media queries

I w środku dla #content ustawiamy „flex-direction” na „column”

 

Zrobimy też to samo dla menu – okropnie wygląda menu „przypięte” do prawej strony podczas gdy reszta strony jest na środku.

 

Dodatkowo dobrze by było gdyby menu i reszta strony były w tej samej linii – teraz manu ma nieco większy padding z lewej strony (domyślnie ma 40px). Usuwamy go:

i dla pierwszej pozycji menu zwiększamy padding lewy z 10px na 20px:

 

To samo musimy zrobić dla ikony, która w wersji mobilnej otwiera i zamyka menu i ma ustawiony margines boczny na 50px. Zmienimy go na 20px:

 

Następnie przydałoby się dodać nieco odstępu między tagami a stopką. Nie musimy się ograniczać tylko do wersji mobilnej, bo w zwykłej dodatkowy odstęp też nie zaszkodzi. Do „#content” dodajemy „margin-bottom: 20px” i łącząc z pozostałymi marginesami otrzymamy:

 

GitHub

Od dzisiaj to będzie stała sekcja w tej serii. Będę tutaj zamieszczał linki do plików (spakowanych), listy wszystkich zmian (bardzo fajnie zobrazowane co zostało dodane, usunięte, zmienione) i odpowiedniej wersji repozytorium na GitHubie (tagowane – więcej o tagach w artykule Git(hub) – tagi i bugi).


Post 13 z 13 z serii Blog od podstaw
  • Paweł Naworol

    stylujemy po id? hmmm pierwsze słyszę:) Rafał no wiesz Ty co:)