Aplikacje no-code z Bubble: Wprowadzenie do responsive design

0:00Witam Cię w kolejnej lekcji, która będzie stanowiła wprowadzenie do niesamowicie

0:04ważnego tematu w kontekście naszego MVP jakim jest RWD.

0:08Jest to skrót od Responsive Web Design, czyli takiego podejścia do projektowania

0:12stron internetowych lub aplikacji mobilnych, które ma na celu dostosowanie

0:16wyglądu i układu treści do różnych rozmiarów ekranów i urządzeń.

0:20Dzięki RWD strona internetowa lub aplikacja wyglądają i działają optymalnie

0:25zarówno na dużych ekranach komputerów, jak i na mniejszych ekranach urządzeń

0:28mobilnych, co zapewnia użytkownikom lepszą jakość i łatwość korzystania z treści.

0:34Podejście to opiera się na elastycznych

0:35układach, skalowalny ich elementach i dostosowaniu treści do specyficznych

0:39wymiarów ekranu, co pozwala uniknąć konieczności tworzenia

0:42oddzielnych wersji strony dla różnych urządzeń.

0:45Jeśli do tej pory nie miałeś do czynienia

0:47z tym zagadnieniem, to odsyłam Cię oczywiście do materiałów sieci.

0:50Znajdziesz tam mnóstwo opracowań

0:52dotyczących Responsive Web Design, z którymi polecam Ci się zapoznać.

0:56Ja natomiast postaram się, aby wdrożyć Cię

0:58w ten temat w sposób jak najbardziej praktyczny.

1:00To co widzisz teraz na ekranie to nasza ukończona strona listingu, która została

1:04zaprojektowana tak, by dobrze wyglądała na dużych ekranach desktopowych.

1:08Zresztą Babel został zaprojektowany do tworzenia właśnie aplikacji desktopowych.

1:12I ten cel spełnia doskonale w materiałach RWD.

1:15Często też natkniesz się na pojęcia mobile first, które w dużym skrócie opiera się na

1:20tworzeniu aplikacji, rozpoczynając od małych ekranów mobilnych, a kolejno na

1:24dostosowywaniu widoków do coraz większych rozdzielczości.

1:27Oczywiście nic nie stoi na przeszkodzie,

1:29abyś właśnie w taki sposób rozpoczynał pracę z aplikacjami w Babel.

1:32Ja jednak osobiście uważam, że dużo

1:34wygodniej jest pracować tak jak do tej pory robiliśmy to w kursie,

1:37czyli rozpoczynając właśnie od widoku desktopowego,

1:40który teraz będziemy dostosowywać do coraz mniejszych rozdzielczości.

1:44I zwróć proszę uwagę na to, że użyłem słowa dostosowywać, a nie tworzyć na nowo,

1:49ponieważ RWD nie ma na celu tworzenia osobnych widoków na różne rozdzielczości.

1:53Takie podejście stosowano kiedyś, gdy RWD

1:55dopiero wkraczał na arenę, ale dziś jest to moim zdaniem już wyjątkowa rzadkość.

1:59Zresztą wyobraź sobie sytuację, w której

2:01teraz musimy utworzyć kopię wszystkich stron naszego serwisu, które wdrożyliśmy i

2:05przebudować je tak, by pasowały do różnych rozdzielczości od niewielkich ekranów

2:09mobilnych, poprzez ekrany tabletów i małych desktopów, aż po ogromne

2:13rozdzielczości, jakie posiadają coraz popularniejsze monitory 4K.

2:17Brzmi jak koszmar, prawda?

2:18Dlatego też Responsive Web Design opiera się na dostosowaniu tego, co już mamy w

2:23taki sposób, aby dobrze wyglądało na różnych typach ekranu.

2:26Natomiast nie będziemy oczywiście w stanie

2:28obsłużyć każdej rozdzielczości, bo na rynku mamy nie dziesiątki, a setki tysięcy

2:32urządzeń, z których każde posiada pewnie trochę inną rozdzielczość.

2:36Dlatego też opieramy się o tak zwane break pointy, czyli konkretne punkty lub

2:40rozmiary ekranów, na których nasz projekt responsywny ulega zmianie.

2:43Aby dostosować się do różnych urządzeń i rozmiarów ekranów.

2:48Są to kluczowe punkty, w których projektant lub deweloper czynimy,

2:51decyduje jak ma wyglądać i zachowywać się strona lub aplikacja na danym urządzeniu.

2:56Przykłady popularnych break point to break

2:58point dla szerokich ekranów komputerów desktopowych, dla tabletów w orientacji

3:02poziomej i pionowej oraz dla urządzeń mobilnych, takich jak smartfony.

3:05W pionowej orientacji.

3:08W momencie osiągnięcia takiego punktu

3:09projekt RWD może zmieniać układ, rozmiar i styl elementów, aby zapewnić optymalne

3:15doświadczenia użytkownika na danym urządzeniu.

3:17Break pointy pozwalają na kontrolowane

3:19dostosowanie strony do różnych środowisk i rozmiarów ekranów, co jest kluczowe w

3:23zapewnieniu responsywności i funkcjonalności na różnych urządzeniach.

3:27Ale z jakich break pointów powinniśmy skorzystać?

3:30Na to pytanie w środowisku Babel przez

3:31długi czas nie było jednej odpowiedzi, więc stosowaliśmy bardzo różne podejścia.

3:36Ostatnie najbardziej popularne to 4 razy

3:38320, czyli 320 pikseli dla ekranów mobilnych, 640 pikseli dla smartfonów

3:44poziomej orientacji lub tabletów 960 dla małych ekranów desktopowych lub

3:49większych tabletów oraz 1280 pikseli dla dużych ekranów desktopowych.

3:54Sam przez jakiś czas starałem się wdrażać to podejście w swoich projektach i muszę

3:58przyznać, że dość różnym, a najczęściej mało zadowalającym skutkiem.

4:02Dlatego też obecne podejście, które

4:04niedawno zaproponował Gregory John uważam za dużo bardziej praktyczne.

4:08Stwierdził on bowiem, że nie ma co próbować wymyślać koła na nowo i zamiast

4:12samemu starać się wymyśleć jakiś sensowny układ break pointów, wystarczy skorzystać

4:16z podejścia, które od wielu lat jest niesamowicie

4:19popularne i korzystają z niego miliony użytkowników.

4:22A takim rozwiązaniem jest Bootstrap.

4:24Tu znów odsyłam Cię do tutoriali w sieci,

4:26jeśli chcesz dowiedzieć się o nim nieco więcej, polecam raczej te krótsze, które

4:30omawiają czym jest sam wrap niż to wielogodzinne, które pokazują jak od

4:34podstaw budować za jego pomocą serwisy internetowe.

4:37Dlaczego? Odsyłam Cię do tych krótszych.

4:38Ponieważ samego Bootstrapa wykorzystamy

4:41tylko i wyłącznie jego break pointy, które wdrożymy do naszego projektu

4:44i to w oparciu o nie dostosujemy nasz projekt do wymagań RWD.

4:48A więc przejdźmy na stronę Bootstrapa.

4:51Widzisz ją teraz właśnie na ekranie i to co musimy namierzyć to sekcje DX.

4:57A następnie tutaj sekcja break Point.

5:00Jak widzisz tutaj mamy wszystkie break point, z których będziemy korzystać.

5:03Jak widzisz, mamy ich tu znacznie więcej

5:05niż we wspomnianym przeze mnie wcześniej systemie 4 razy 320.

5:08A dzięki temu nasz serwis będzie się znacznie lepiej prezentował.

5:12Dodatkową zaletą wykorzystania Bootstrapa

5:14jest fakt, że bardzo wielu designerów tworzy layouty według jego wytycznych.

5:18W sieci znajdziesz całe mnóstwo zasobów, które zostały oparte o brak pointy, więc

5:22tym łatwiej będzie Ci je wdrożyć do projektu.

5:24W przypadku, gdy pracujesz z

5:25profesjonalnym designerem, jego zadaniem najczęściej będzie dostarczenie Ci layoutu

5:29aplikacji lub przynajmniej trzech widoków mobilnego tabletu oraz desktopowego.

5:36Natomiast jeśli korzystasz z gotowych i weeks to bywa z tym różnie.

5:39W tych lepszych, a więc często i droższych

5:41rzeczywiście znajdziesz odpowiednie widoki, ale bardzo często będzie to tylko

5:45widok desktopowy i to Twoim zadaniem będzie dostosowanie aplikacji i

5:49sprawdzenie, w jaki sposób prezentuje się ona na różnych urządzeniach.

5:52I tu pojawia się oczywiście kolejne pytanie Jak w zasadzie masz to sprawdzić?

5:56Otóż jest na to kilka sposobów.

5:59Najlepszym jest oczywiście posiadanie w

6:01domu kilku urządzeń i odpalenie serwisu na komórce lub tablecie.

6:05Ale oczywiście nie oznacza to, że musisz

6:07teraz pauzować wideo i biec do sklepu, aby kupić nowy tablet lub telefon.

6:12Kolejnym bowiem sposobem jest

6:13wykorzystanie zakładki responsive w edytorze Babel.

6:16A więc wróćmy do edytora.

6:19Jesteśmy najpierw w zakładce Design i

6:21kolejno tutaj możemy przełączyć się do Responsive.

6:25Tu jak widzisz możemy się przełączać

6:27pomiędzy poszczególnymi, zdefiniowanymi już dla nas wcześniej break point ami

6:32i większość z nich pokrywa się z tym, co oferuje nam Bootstrap.

6:35Wróćmy na chwilę do mojego.

6:38Zacznijmy od tego, czyli na rozdzielczości powyżej 1400 pikseli.

6:44Ja mówiłem Ci już na samym początku, że

6:46zawsze zaczynam od rozdzielczości 1440 pikseli.

6:49Dzięki temu właśnie ten break point mamy tutaj od razu obsłużony.

6:53Dodatkowo jeżeli stosowałem container, to

6:56starałem się ustalić jego maksymalną szerokość na 1200 pikseli, dzięki czemu

7:00ten, który widzisz tutaj również od razu mieliśmy obsłużony.

7:04Break point.

7:04Równe 992 i 768 pikseli mamy już wdrożone tutaj bezpośrednio.

7:10Babel, natomiast brakuje nam jeszcze 576,

7:14a więc możemy go sobie dodać za pomocą właśnie tego plusika.

7:18Wybrać ATX Tom.

7:21I wpisać wartość 576 pikseli, dzięki czemu będziemy mieć teraz wszystkie

7:26break pointy, które podsyła nam właśnie Bootstrap.

7:30Natomiast w tym miejscu chciałbym zwrócić uwagę na jeden bardzo ważny fakt.

7:34Jeśli do tej pory zdarzyło Ci się pracować z Web Flow, to doskonale wiesz, że tam

7:38możesz właśnie również przełączyć się pomiędzy takimi break point ami

7:41i specjalnie dla każdego z nich zdefiniować odpowiednie style,

7:44które mają zastosowanie tylko i wyłącznie właśnie dla tego break point.

7:48Niestety w Babel to tak nie działa.

7:50Te break pointy służą nam tylko i wyłącznie jako podgląd, a my musimy zadbać

7:54o odpowiednie dostosowanie stylów w nieco inny, bardziej manualny sposób.

7:58Ale do tego przejdziemy nieco później.

8:00Kolejnym największym minusem tego podglądu jest fakt, że w momencie jak korzystamy z

8:04dynamicznych wartości, wszystko zaczyna nam się dosyć mocno rozjeżdżać i trudno

8:08jest oszacować, czy nie wygląda to dobrze, np.

8:10weźmy sobie tutaj niżej.

8:12Jak widzisz, mamy tutaj przekazywane

8:13dynamiczne wartości i ten nagłówek na pewno nie będzie taki

8:16długi, bo będzie to po prostu jakiś krótki tekst.

8:19Właśnie o tym mówię.

8:20Dlatego też lepiej jest zastosować inne

8:22podejście i w tym celu wykorzystać po prostu przeglądarkę.

8:26Natomiast jako przeglądarkę.

8:27Ja w pierwszej kolejności zdecydowanie

8:29polecam Ci przeglądarkę Chrome, ponieważ jest ona po prostu najpopularniejsza.

8:33Jeśli Twoja strona bądź aplikacja będzie się dobrze na niej prezentowała,

8:37to obsłuży już zdecydowanie największe grono Twoich potencjalnych odbiorców.

8:42Przejdźmy więc do przeglądarki Chrome.

8:44Ja mam ją tutaj utworzoną.

8:47Jak widzisz w tym miejscu mamy tutaj podgląd naszej strony.

8:52Tutaj wywalamy sobie to.

8:55Żeby się co chwilę nie włączało.

8:57Jak teraz sprawdzić podgląd naszej strony?

9:00Wystarczy, że gdziekolwiek na stronie

9:02kliknę prawym przyciskiem myszy i wybiorę zbadaj.

9:05Otworzy mi się tutaj panel dewelopera.

9:07To co mnie interesuje to przede wszystkim zwężenie tego okna.

9:11Nie będziemy korzystać z tej części.

9:14Oraz kliknięcie w tę ikonę.

9:16I teraz możemy się przełączać pomiędzy różnymi biegunami.

9:20Możemy sobie skalować nasze okno w ten sposób zmieniać jego szerokość,

9:26albo po prostu wybierać jakiś zdefiniowany break point, np.

9:29375 pikseli.

9:31No i jak widzisz już nasza strona nie

9:33prezentuje się tak fajnie jak na tym dużym ekranie powiedzmy 4K.

9:39Natomiast ja w przypadku Chrome'a bardzo często korzystam

9:42z tego pluginu, a w zasadzie w tej wtyczki do Chroma o nazwie Responsive.

9:47Wystarczy, że nabierze się po prostu w

9:49Chrome Web Store, dodasz do przeglądarki i po jej dodaniu.

9:56Możesz kliknąć właśnie tutaj.

9:57Jeżeli nie widzisz tego znaczka, to

9:58najpierw kliknij w te rozszerzenia i przypnij go sobie do paska.

10:02I teraz mogę sobie zdefiniować listę

10:04różnych urządzeń i od razu dzięki temu widzę jak moja

10:08strona prezentuje się właśnie na wszystkich nich.

10:11Tutaj je sobie dodajesz.

10:12Wystarczy, że wybierzesz któreś z tych urządzeń.

10:15Znajdziesz tutaj na jakiegoś określone urządzenia.

10:17Jak klikniesz plusik zostanie dodane tutaj na tę listę

10:20obsługiwanych, to wystarczy, że wejdziesz na minus i ona zostanie usunięta.

10:26Kliknij tutaj, żeby odświeżyć naszą stronę.

10:28Czasami ona się odświeża na wszystkich,

10:30czasami nie, więc najczęściej po prostu klikam sobie tu.

10:33Co też nie zawsze pomaga.

10:36Możemy po prostu przeklikać się przez te różne widoki.

10:39Natomiast to mamy po prostu od razu zdefiniowane konkretne urządzenia.

10:42Jak widzisz mamy tutaj iPhone XS, iPhona, XS, Max, Nexusa itd.

10:47Natomiast interesują te wartości, a

10:49zwłaszcza ta pierwsza, czyli szerokość ekranu.

10:52Jeśli zjadę niżej to mam tutaj jeszcze.

10:56Taką rozdzielczość iPada mini.

11:00To mam jakiś mały ekran 1024 na 800

11:03pikseli, a to już trochę większe 1280 a nawet 1440.

11:10Dzięki temu od razu możesz sprawdzać, jak

11:12strona się prezentuje właśnie na tych urządzeniach.

11:14A dodatkowo możesz wykorzystać jeszcze tutaj.

11:18Ten scroll i zmniejszyć sobie ten widok np.

11:21do 50% i od razu widzisz widok niemal wszystkich urządzeń.

11:26Na razie zostawmy to w ten sposób przez

11:29kierujmy się na dół, ponieważ ja chciałbym zacząć dostosowywać

11:32naszą stronę już do widoku mobilnego, natomiast nie zaczynać od całej strony,

11:38tylko pojedynczego elementu, jakim jest tutaj nasz footer.

11:41Wróćmy więc może tutaj.

11:45Przejdźmy do widoku na razie 1440 pikseli.

11:48Zejdźmy na sam dół i zerknijmy, jak na żywo się będzie

11:52zachowywał, kiedy będziemy zmieniać szerokość.

11:55Na razie jest ok.

11:58Tu przeskoczyła nam ta grupa, ale jeszcze wygląda to całkiem w porządku.

12:06Natomiast im bardziej zjeżdżam, to odstępy robią się coraz mniejsze, więc

12:11mniej więcej w tym momencie tabor ich 992 piksele.

12:14Chciałbym, żeby te wszystkie trzy grupy przeskoczyłem poniżej,

12:18czyli ta wyświetlała się tu na całą szerokość, a potem te trzy grupy tutaj.

12:24Wejdźmy teraz jeszcze niżej.

12:26Jak widzisz, mamy tutaj coraz mniej miejsca.

12:31W tym momencie powinniśmy gdzieś dotrzeć do widoku tabletu.

12:35Mogę go sobie tutaj wybrać.

12:38I tak z reguły dla widoku tabletu

12:40staramy się, aby te odstępy z lewej i prawej strony padding ustawialiśmy

12:44domyślnie na 32 piksele zmniejszyć o połowę.

12:4732 to zdecydowanie za dużo dla tabletów i widoków mniejszych.

12:52Najczęściej stosuje się właśnie 16 pikseli i zaraz o to zadbamy.

12:56Zadbamy również te padding na górze, Pamiętasz?

12:59Mieliśmy 96 pikseli, a to już jest zdecydowanie za dużo na takim widoku

13:04i dostosujemy sobie tutaj jeszcze całą resztę.

13:07Natomiast pytanie teraz brzmi w jaki sposób to zrobić?

13:11Otóż w Babel jest to dosyć manualne.

13:13Proces dosyć męczący, ale na szczęście bardzo prosty.

13:16I zaraz Ci to udowodnię.

13:17Wróćmy więc do edytora.

13:22Przejdźmy tutaj do naszego fightera, czyli RP, czyli naszego kraju.

13:28Mówiłem, że chcę zacząć od kontenera, a więc go sobie zaznaczam.

13:33Przechodzę do Condition All i dodaję pierwszy warunek.

13:38Odnoszę się do Page Five Current page five.

13:42I chce zacząć od break point równego 992 piksele.

13:49Widzisz jak zaczynam wpisywać ta pojawia mi się tutaj ta opcja.

13:51Mogę ją sobie teraz zaznaczyć i co chcę zmienić?

13:54Chcę zmienić przede wszystkim padding górne i dolne.

13:59Ja z reguły ustawiam to tak, że dla widoku

14:01tabletu owego to powinna być połowa tego co jest dla desktopa.

14:05Natomiast przy 9 9.

14:072 tylko połowa.

14:09Zresztą zaraz zobaczysz jak to działa.

14:11A więc padding top.

14:16I padding bottom.

14:19Zaczynamy od 96.

14:20Ja chcę tutaj ustawić 64 piksele.

14:27Teraz kolejno zdefiniować następne Break point.

14:30Mogę sobie to skopiować.

14:35I tutaj.

14:36A w zasadzie może zróbmy tak, że skopiuje cały ten condition, ponieważ znowu będę

14:40się odnosił do tych samych peelingów, tylko chcę dodać jeszcze lewy.

14:47I prawe.

14:50I tu wartości zmienić na 48 góra dół.

14:56Szesnaście pikseli. Lewa.

14:57Prawa.

15:00I tu jedynie nie 9,2 tylko 7, 6, 8.

15:07Natomiast pamiętaj, że kolejność tych warunków ma znaczenie.

15:10W Babel one są odczytywane po kolei,

15:13więc zobacz, co by się stało, gdybyśmy przenieśli na górę.

15:16Tak, Babel sprawdza szerokość strony.

15:18Powiedzmy, że to jest 768 pikseli,

15:21bo mamy tutaj warunek, że to jest mniejsze bądź równe 768 pikseli.

15:25A więc najpierw ustawili byśmy te padding, ale potem zjechał by poniżej i znalazł by

15:30warunek że ta szerokość strony jest mniejsza równa 9,2 piksela.

15:35To też by miało zastosowanie.

15:37A więc wtedy te padding zwiększyły by nam się z 48 do 64.

15:43Dlatego też właśnie jedziemy zawsze w ten sposób od największego do najmniejszego.

15:48Mamy ten pierwszy tutaj zastosowany.

15:51A więc przejdźmy dalej.

15:53To, co chcę zrobić tutaj.

15:56To zostawić bez zmian.

15:59Natomiast.

16:01Tutaj odnieść się tak jak mówiłem, do tej grupy.

16:05Mogę sobie wstawić tutaj ten condition?

16:08Odnoszę się do szerokości 992 piksela i

16:11tutaj minimalną szerokość całej tej grupy chcę ustawić na 100%.

16:15Wtedy ona się rozciągnie na całą dostępną szerokość kontenera rodzica.

16:19Czyli odnoszę się do minus.

16:23I mówię, że ma to być 100%.

16:26Oczywiście nie tylko tutaj.

16:30Teraz skopiuj ten warunek i to samo zróbmy tutaj dla tej grupy z linkami.

16:37I zerknijmy jak to teraz działa.

16:39Możemy przejść nawet tutaj do Responsive.

16:42I tak jesteśmy w doku default.

16:44Przechodzę na 9,2.

16:46Jak widzisz to już zadziałało.

16:49Ta grupa mi się rozciągnęła.

16:51Podobnie ta.

16:53Następnie chcę sobie zjechać do 7. 6 8.

16:56Tu jest jeszcze ok.

16:58Natomiast spróbujmy zjechać niżej, poniżej 7 6, 8.

17:03Tu widzisz jaką mamy aktualnie szerokość strony.

17:08Tu jest jeszcze wydaje mi się, że ok,

17:09przynajmniej dla tej grupy, ale poniżej 5, 7, 6.

17:12Chciałbym te grupy umieścić jedna pod

17:14drugą, a więc mogę sobie zaznaczyć nawet i w tym widoku tą pierwszą grupę z linkami.

17:22Dodać ten warunek i tutaj tylko wybrać 5 706.

17:28Teraz taki warunek muszę skopiować i wkleić tutaj dla tych pozostałych grup.

17:34Od razu możemy zmienić nawet ich nazwę.

17:38Na właściwe.

17:42I to samo dla tej trzeciej grupy.

17:52Więc jeśli teraz zjedziemy sobie tutaj do

17:54576, z jakiegoś powodu nam się tutaj to nie dodało.

17:58Zostawmy więc 576.

18:05Wejdźmy do tego widoku.

18:07Jak widzisz już jest ok.

18:09Te grupy są umieszczone jedna pod drugą,

18:12natomiast nie mamy tutaj żadnych odstępów między nimi.

18:14Możemy o to bardzo prosty sposób zadbać

18:16przechodząc do footer links do zakładki Layout.

18:20I tutaj dodając Cap space Wing.

18:27Dla rock up. Powiedzmy niech to będzie 24 piksele.

18:31Teraz te grupy są już odpowiednio od siebie odsunięte.

18:35Natomiast kolejna bardzo ważna uwaga w przypadku tych conditions nigdy nie

18:39będziemy w stanie zmienić container layout.

18:41To jest coś, co możemy zrobić Web flow.

18:42Niestety Babel na to nie pozwala.

18:44Dlatego też właśnie musimy tak kombinować z ustawieniami np.

18:47minimalnej szerokości grupy maksymalnej itd.

18:50A więc tą część mamy tutaj z głowy.

18:53Zadbajmy jeszcze tutaj o tą część.

18:55Ja w przypadku tej grupy, czyli grupy

18:58footer bottom to co chcę zrobić to przejść do conditions a.

19:04Dodać ten warunek.

19:07Tu odnieść się do 952.

19:11I już dla tej rozdzielczości chcę sobie wyśrodkować te elementy.

19:14Pozbywam się minimalnej szerokości, wybieram sobie.

19:20Container Archive nie tylko Horizontal Archive chce wyśrodkować te elementy.

19:28Kopiuję sobie cały ten warunek.

19:31I teraz tak przechodzę do tekstu.

19:35Wklejam go.

19:38I co chcę tutaj zrobić.

19:40Pojedźmy może tutaj do jakiejś mniejszej rozdzielczości.

19:449, 27, 6, 8.

19:46To już powinno zadziałać.

19:48Aha, nie zadziałało.

19:49Dlaczego?

19:50Dlatego, że ta grupa nie ma jeszcze

19:52minimalnej szerokości, a chcę, żeby ona wskoczyła tutaj, poniżej dla 992.

19:58Na tej szerokości.

20:00Chcę sobie to wszystko wyśrodkować.

20:03A więc kopiuję ten warunek, zaznaczam tą

20:06grupę, wstawiam i tutaj mówię, że to ma być minus.

20:12Równe 100%.

20:17Jak widzisz teraz mi to wyskoczyło.

20:20To co chcę zrobić, to jeszcze wyśrodkować te elementy w środku.

20:24A więc.

20:27Vertical rise and Container Online.

20:29To właśnie wybieramy to.

20:32Dla całej grupy footer bottom.

20:34Dodajmy jeszcze gap space sink dla row równe powiedzmy 24 piksele.

20:40W ten sposób odsunęli śmy sobie te dwa elementy.

20:44Teraz możemy wrócić do tego tekstu.

20:49Wybrać sobie.

20:53Vertical, nie vertical.

20:54Zawsze mam problem, który powinien być.

20:59Czy mamy tutaj jakieś inne?

21:03Nie mamy, więc możemy to zrobić w ten sposób, że dla całej tej grupy mamy

21:07horizontal element, więc te elementy powinny nam się tutaj wyśrodkować.

21:12Czemu one się tutaj nie?

21:14Środkową.

21:16A nic. Zaraz zobaczymy.

21:18Mamy tutaj jakiś layout, Mamy tu content.

21:27Czemu nam to tutaj teraz nie działa?

21:30Mamy footer, bo tam.

21:32Horizon.

21:34OK. OK.

21:36OK.

21:37Ponieważ tutaj powinniśmy mieć kontakt najlepiej.

21:42I teraz dopiero tutaj mamy wyśrodkować.

21:44Czyli zawsze sobie sprawdzamy jak się to nazywa.

21:46Myślę zawsze te dwa mi te dwie opcje mylą, więc się nie przejmuj,

21:51że bardzo często będę się zastanawiał, który jest który.

21:54Natomiast zawsze sprawdzasz tutaj mieliśmy najpierw strzelone, teraz chcemy to

21:57wyśrodkować, więc odnosimy się do konkretnej wyśrodkować.

22:01I teraz tak zerknijmy na jakiś mniejszy widok.

22:05To jest ok.

22:06Jak wejdziemy do tego najmniejszego, to ten tekst nie jest odpowiednio

22:11centralny, a więc możemy się do niego odnieść.

22:15I tutaj dla tabletu nie musimy nic ustawiać, ale znajdziemy sobie do 5, 7, 6.

22:25Teraz mogę się odnieść do tekstu.

22:29Wstawić tutaj całą tą wartość.

22:32Po prostu ją sobie tutaj skopiować i wstawić.

22:36Czyli z nim to w ten sposób.

22:43Zostawmy tak.

22:46Skopiuję to.

22:51Postawmy teraz.

22:52Kopiujemy cały ten statyczny tekst, żeby uzyskać dokładnie taką samą wartość.

22:58I teraz tylko wybieramy Rich Text Editor.

23:01Zaznaczam całość.

23:03Koncentruje.

23:05I już teraz nasz futer będzie się

23:07genialnie prezentował właśnie takiej rozdzielczości typowo mobilnej,

23:12bo właśnie tą default ową, czyli właśnie dla tych 44 1440 pikseli.

23:17To zresztą mogę Ci udowodnić przechodząc właśnie tutaj do Chroma.

23:25Weźmy na sam dół.

23:30Tu mamy jeszcze problem, ponieważ zachodzi nam

23:34ten box tutaj dolny, ale tym się chwilowo nie przejmuj, o to zadbamy później.

23:38Natomiast zobacz co się dzieje.

23:40Tak jak widzisz odpowiednio przeskakuję.

23:44Wszystko jest tutaj fajnie, wyceny owiane

23:46i umieszczone, a jak wejdziemy na coraz większe

23:49rozdzielczości to wskakuje we właściwe miejsca.

23:51I dokładnie na tym polega budowanie,

23:54a w zasadzie dostosowanie Twojego serwisu do RWD.

23:57W tej lekcji tylko zahaczyliśmy o czubek góry lodowej.

24:02Dostosowaliśmy tylko i wyłącznie nasz footer.

24:04Natomiast w kolejnych lekcjach będziemy

24:06oczywiście dostosowywać wszystkie strony, które do tej pory wdrożyliśmy.

24:10Tak więc już nie przedłużając dziękuję Ci

24:12za uwagę i wracamy do naszej pracy w kolejnej lekcji.