Aplikacje no-code z Bubble: Dostosowanie strony search
Wdrożenie projektu
15 godz. 6 min · UI, UX i Webdesign
Krzysiek PiekarzAutomation Specialist / No-code DeveloperCzego się nauczysz
- Z jakich narzędzi i serwisów korzystać, by zaprojektować interesujący i ciekawy layout.
- Podstawowych technik pracy z narzędziem Figma, by nasz statyczny design zamienić na aplikację.
- Pracy z edytorem Bubble, gdzie skupimy się na jego podstawowych elementach i funkcjonalnościach
- Tego jak przygotować nowoczesny landing page, posiadający wszystkie niezbędne elementy strony sprzedażowej
- Dodatkowo wdrożymy również inne strony w naszym serwisie - czyli logowania/rejestracji, wyszukiwania, stronę pojedynczego itemu oraz stronę profilową i stronę rezerwacji
- Na koniec zajmiemy się również wdrożeniem w pełni funkcjonalnego dashboardu dla naszych użytkowników i wynajmujących
Dla kogo jest ten kurs?
Materiał szkoleniowy został zaprojektowany tak, aby mogło z niego skorzystać jak najszersze grono odbiorców. Nieważne czy jesteś totalnym laikiem, czy też posiadasz już wiedzę z zakresu programowania lub designu, na pewno znajdziesz tu coś dla siebie. A więc kto jeszcze może skorzystać z wiedzy zawartej w tym kursie?
Zanim przejdziemy do dostosowania kolejnej naszej strony do wymogów RWD, szybkie
rozwiązanie problemów z sekcji poprzedniej.
Przede wszystkim jak widzisz, usunąłem ten
scroll, która pojawiała się tutaj w tym widoku.
Nexus 7.
Rozwiązanie było mega proste.
Wystarczyło tylko zmienić break pointy dla tych obrazków, czyli ukrywać te dwa nie
dla break pointy poniżej 576 pikseli, tylko już na 768.
I w ten sposób również ukrywam ten obrazek
1:1 dla tego break point i wyświetlam ten tutaj z aspect ratio 2k3.
Natomiast problem z kartą listingu polegał na tym, że jeżeli przejdziemy sobie
tutaj bezpośrednio do tego elementu, to cała ta karta, cała ta
listing grupa miała tutaj ustaloną maksymalną szerokość równą 350 pikseli.
Ja ją przede wszystkim wywaliłem.
Dodatkowo dodałem jeszcze tutaj Condition, ale dla tych tekstów domyślnie mamy tutaj
tą ikonkę i w zasadzie nie tyle ikonkę, co numer, liczbę gości i tekst gest.
Ja to po prostu pozostawałem, jak widzisz tylko te cyfry.
Wydaje mi się, że to dużo lepiej wygląda właśnie w takim mniejszym widoku.
Wszystko tutaj, dlatego
poniżej 768 pikseli, a więc otrzymujemy coś w tym stylu.
Nie jest to może idealne, ale dużo lepsze niż teksty nachodzące na siebie.
A skoro tą część mamy już załatwioną, to
przejdźmy teraz do strony search i postarajmy się tutaj dostosować.
Jak widzisz jestem widoku 1440 pikseli
i mimo, że tutaj w naszym podglądzie w edytorze wyglądało to całkiem fajnie,
no to tutaj już widzisz te grupy nie do końca tutaj pasują.
Czy potrzebujemy tutaj zmienić układ i
wyświetlać tylko dwie kolumny w tym widoku?
To już zależy od Ciebie.
Możesz oczywiście to dostosować.
Ja powiedzmy na razie uznam, że tego nie
widzę i zostawię to właśnie w takiej formie.
Po prostu nie będę się przejmował, że to jeszcze na Ciebie nachodzi.
Natomiast chcę się w pierwszej kolejności zająć dużo ważniejszymi rzeczami, a
mianowicie zacznijmy od naszego rozbudowanego nav baru.
Ponieważ jest on line i tak będzie
wyglądał tylko i wyłącznie przynajmniej na stronie search na razie.
A więc zobaczmy jak on się tutaj prezentuje.
Kiedy zaczniemy zmniejszać rozdzielczość, to już się zaczyna pojawiać problem.
Zresztą on się pojawia dużo wcześniej.
Jak widzisz tutaj już poniżej 1400.
A więc wróćmy do edytora i to, co musimy zrobić w pierwszej kolejności.
A co zapomniałem zrobić od razu, kiedy budowaliśmy bar.
Przejdźmy tutaj.
I tak ukryjemy grupę link z linkami.
Pokażmy tą całą grupę search.
W niej mamy tą grupę.
I teraz tak dla całej na w search chcę zaznaczyć Featured content
i to samo musi być zaznaczone dla Search Result Group.
Teraz wracamy odświeżamy.
No jak widzisz już jest dużo lepiej, a więc dajmy sobie coraz niżej.
1024 już jest ok,
ale kiedy zaczniemy zjeżdżać poniżej 962 to wydaje mi się, że jest ok.
Spróbujmy dojechać do 7, 6, 8.
No nie, to już będzie problem.
Więc.
Ta poniżej 909.
2 Wydaje mi się, że możemy spokojnie usunąć tutaj to logo.
Zresztą bardzo podobnie robi sama RB.
A więc wracamy do edytora.
Zaznaczam sobie całą tą grupę na logo Wrapper Group,
przechodzę do Conditions i i tak ono się pojawia tutaj, kiedy jesteśmy na stronie.
Ja właśnie tylko tam chcemy tak naprawdę
ukryć tą grupę przy odpowiedniej rozdzielczości,
bo jak pamiętasz na stronie listingu to logo całkiem fajnie wyglądało.
Nie musieliśmy tego robić, a więc
zostawiam sobie takiej Condition all, gdzie current page name is search and.
Agenci.
Mniejsza, równa 9 9 2.
Chcę całkiem ukryć ten element.
Jeszcze zerknijmy, czy mamy tutaj collapse on line.
Nie. Więc musimy zaznaczyć.
Wracamy, Odświeżamy.
I teraz mamy już dużo więcej miejsca.
Jedźmy więc do 7, 6, 8.
Wszystko jest ok.
Spróbujmy dojechać do 5, 7, 6.
Czy damy radę?
Jak widzisz jeszcze dajemy radę.
Natomiast poniżej tego punktu na pewno będziemy musieli wprowadzić jakieś zmiany.
A więc wracamy.
To co ja będę chciał zrobić, to tak Ukryć tą ikonkę, ukryć tutaj ten divide.
Te teksty nieco zmniejszyć i ustawić je pod tym tekstem.
Zresztą zaraz zobaczysz, co mam na myśli.
Ja już to sobie odpowiednio wcześniej zaplanowałem.
Natomiast tak jak widzisz, nie ma tutaj tego środka.
Będziesz musiał sam dojść do tego,
w jaki sposób poukładać te elementy, aby uzyskać jakiś fajny widok.
Ja w tym przypadku całkowicie wzorowałem się na RB.
Nie ukrywam, nie jest to jakiś tam mój innowacyjny pomysł.
Po prostu zerknąłem jak oni mają to rozwiązane i starałem się zastosować
podobne tutaj opcje, aby uzyskać jak najbardziej zbliżony wynik.
A więc wracamy.
I teraz tak cała ta ikonka.
Ale ona ma kola słoneczne, więc dodajemy.
Oczywiście to będzie 5, 7, 6.
I tutaj ukrywamy.
Kopiuję ten condition, ale zaznaczam sobie ten divided.
I jego też będę chciał ukryć.
To samo zrobić tutaj dla tego DVD, a też go ukryć.
Natomiast teraz tak, to mamy te dwa elementy.
Ja chciałbym ubrać teraz w grupę.
Jakie mamy tu odstępy? Zerknijmy.
To było 16 pikseli.
OK, zaznaczmy te trzy elementy.
Spróbujmy w grupę Container.
Wybierzmy tutaj fit fit content, żeby nam się to odpowiednio dostosowała.
Dodajmy ten gap space ping równy
16 pikseli, aby uzyskać dokładnie ten sam efekt, który mieliśmy wcześniej.
I teraz tak.
Na razie nie zmieniajmy tej nazwy grupy.
Przejdźmy tylko do Conditions.
I tu będę chciał ustawić przede wszystkim min.
Vive.
Równe 100%.
Zaraz zobaczysz jakie to będzie miał efekt.
Dodatkowo dla tej szerokości już ten gap Space Ink troszkę zmniejszymy.
Będzie to 8 pikseli.
Chcę jeszcze zmniejszyć czcionkę.
To będzie font size.
Nie 14, tylko 11.
I to samo zastosować dla tego tekstu.
I teraz zerknijmy jak to się będzie prezentowało.
Jestem na 576.
Jak widzisz uzyskuje właśnie taki fajny efekt.
Czyli mam San Francisco i pod spodem właśnie te teksty.
To co mogę tutaj jeszcze zrobić, to dostosować trochę te padding
i przede wszystkim zobaczyć czy ten tekst mi się tutaj dostosowuje.
OK, jest w miarę w porządku.
A więc tak zaznaczmy całą tą grupę.
Dodajmy.
Ten warunek i może zmienimy padding i one to były 10 na 10.
Ja chcę tutaj ustawić je.
Na dużo mniejsze wartości.
Powiedzmy osiem góra dół.
I 12 lewo prawo.
I może dać tutaj jakąś maksymalną
szerokość, żeby nam się ten element aż tak bardzo nie rozciągał.
Dajmy mu tutaj max gif równe.
Spróbujmy 220 pikseli.
Zerknijmy jak to będzie się prezentowało.
OK, już chyba jest całkiem fajnie.
Nawet jeszcze tutaj te odstępy są trochę za duże.
Wydaje mi się, że jednak lewo prawo możemy pozostawić na większe.
Tu mamy chyba zresztą nadaną jakąś minimalną wysokość, a tego elementu nie.
Nie mamy.
A więc spróbujmy Left Right zostawić może na 16.
Odświeżyć.
OK. Trochę lepiej to wygląda.
Moglibyśmy jeszcze dostosować szerokość, ale powiedzmy, że jest w miarę ok.
Jest jak zjadę niżej. Nawet na 3.
7 5 to jest w porządku.
Tu musimy jeszcze zadbać o dostosowanie całej wyszukiwarki.
Kiedy ten element się otwiera, ale tym można zajmijmy się później.
Na razie grunt, że nasz bar wygląda tak,
jak powinien, a my przejdźmy na razie do reszty strony.
A więc tak wracamy sobie do strony Search.
I tak to co będę chciał zrobić.
To przede wszystkim pozbyć się całej tej sekcji.
Z kategoriami.
Dla jakiegoś mniejszego widoku spróbujemy 1024.
Jeszcze jest ok.
7 6, 8.
Już tutaj chyba bym się go pozbył.
Wydaje mi się, że tutaj już jest to niepotrzebne.
A więc może właśnie tak zróbmy?
Przejdźmy sobie tu.
Oczywiście moglibyśmy teraz pobrać te wszystkie kategorie i dodać je
tam do naszego pop upów z filtrami, żeby użytkownik ich nie tracił.
Ale powiedzmy, że na razie wystarczy nam po prostu całkowite ukrycie tej grupy.
Czyli zaznaczamy collapse hidden. Stawiam.
Odnoszę się do 7, 6, 8 i po prostu ukrywam całą tą grupę kolejno.
Mamy tutaj grupę z mapką i grupę z contentem.
Klikniemy na drzewko elementów. Tutaj tak?
Co my tu jeszcze mamy?
Czy content ma tutaj jakieś padding?
Nie ma content top.
Ma, więc musimy je odpowiednio dostosować.
Czyli 7, 6, 8.
I to powinno być 16 pikseli z lewej prawej.
Kolejna mamy tutaj content inner.
Pozbywamy się minimalnej wysokości.
Brak puddingu, więc chwilowo nie musimy tutaj nic zmieniać.
Content left Mamy padding i.
A więc chcę je sobie tutaj zmniejszyć, a dodatkowo powiedzmy, że na szerokości
tysiąca 200 pikseli chcę już w ogóle pokazywać tylko tą listę.
A mapkę?
Też zaraz dostosujemy.
A więc.
No tak, 1200 pikseli chcę ustawić minus.
Na 100%.
I na wszelki wypadek jeszcze zmniejsz.
Zwiększymy tutaj max width, która domyślnie ma 60%.
Tutaj też ustawmy stop.
Oczywiście nie zaszkodzi.
Skopiuj i to sama nadaj medal grupy Content Write.
Tylko tu jeszcze dodałbym wtedy padding i.
To domyślnie ich danych nie mieliśmy, a więc padding left i padding right.
Ustawione na 16 pikseli.
Zaraz zerkniemy jak to będzie się prezentowało.
Tu jest ok. Schodzimy niżej.
Trafiamy na 1200. OK, mamy.
Lista całkiem fajnie się prezentuje,
natomiast mapka zniknęła nam aż tutaj na dół zjechała.
Zaraz będziemy musieli o to zadbać.
Co my tu jeszcze mamy?
Ciężko mi nawet sklonować.
Chciałbym ją ogólnie przesunąć na samą górę, natomiast znów.
Jak mamy ją tutaj umieszczoną.
Mamy tutaj content top, który nam pozostaje.
I tu mamy left right.
Niestety w przypadku Conditions ja nie mogę sobie ustawić kolejności.
Nie mogę tego orderu zmienić, więc to co muszę zrobić to jak się domyślasz to
wstrzyknąć swoje własne style CSS, żeby się do tego odnieść.
Tu jeszcze tylko literówka.
A więc przechodzę sobie tutaj do content inner i spróbujmy gdzieś tutaj wstawić.
A jakiś element z HTML em, tak żeby on jakoś w miarę się to nam tutaj ustawił.
Może w tej grupie mamy to skonstruowane?
A może zróbmy tak zaznaczmy sobie to background.
Ustawmy ją w rogu container.
Strzelamy te elementy i tutaj wstawiamy
element HTML tak, żeby on nam tutaj nie psuł całej tej pozostałej treści.
Niech to będzie map HTML.
Ja tu wstawiam od razu wartość.
Zaraz Ci to wytłumaczę.
I tak mówię tutaj, że chcę zmienić ten
order dla grupy Search Group i grupy Mar Group dla rozdzielczości poniżej 1.
200 pikseli. Czyli muszę zastosować taki zapis.
To co robimy teraz Condition ala Mi w
Babel w CSS zapisuje się w taki sposób za pomocą Media Query as.
A więc mówimy, że kiedy szerokość ekranu
będzie równa maksymalnie 1200, czyli poniżej 1.
200, chcemy zmienić order, czyli kolejność zlania się tych grup.
Musimy teraz je odpowiednio nazwać, bo nie mamy.
Założę się, że nie mamy tego właśnie tutaj.
Czyli tak.
Cała ta content Left Group.
O właśnie, to sobie zaznaczmy i przejdźmy jeszcze do tego HTMLa.
Najpierw najpierw wstawiamy ją tutaj jako ID atrybut.
I teraz dopiero tutaj ten html.
I muszę zmienić nazwę.
Czyli to nie będzie serwer, tylko będzie tak.
To powinno być order numer 2.
Klikam sobie save.
Staram się namierzyć teraz ten kontent Rise Group.
O właśnie.
Trochę pozmieniałem nazwy względem
projektu wzorcowego i dlatego te nazwy w CSS ach nie zgadzają.
Ale to nic, wracamy i po prostu zmieniamy nazwę.
Czyli w ten sposób mówimy, że ta grupa z
prawej ma być pierwsza, a ta grupa z contentem ma być poniżej.
Klikam save.
Przechodzę jeszcze do layoutu.
I ustawiam sobie tutaj powiedzmy 10 na 10 pikseli.
Teraz zerknijmy do podglądu.
Jak widzisz dużo fajniej to wygląda.
Mamy tutaj to powitanie, mamy mapkę, na której będziemy wyświetlać odpowiednie
elementy i dopiero poniżej mamy właśnie tą listę z elementami.
A więc jedźmy niżej i zobaczmy co tu jeszcze powinniśmy zastosować.
Tu jest chyba ok.
Jak z tą listą?
Czy to jeszcze wygląda dobrze?
Może nie, może Ja wiem?
Jak uważasz?
Drogi użytkowniku?
No właśnie, to jest
najważniejsze pytanie czy to wygląda dobrze, czy już powinniśmy coś zmienić?
Ja wydaję mi się, że może jednak tutaj ustalimy już te dwa elementy na liście.
Dla tego brak poniżej 992 pikseli.
A więc przechodzę tu.
Odnoszę się do 992.
I tutaj Kolumb zostawmy na dwa.
A rzędy ustawmy np.
na 4.
To jest oczywiście tylko takie modelowanie, więc na razie nie ma tutaj
większego znaczenia, jakie wartości wybierzesz.
Staraj się po prostu dobrać to tak, żeby jakoś tak miarę fajnie wyglądało.
Zerknijmy.
OK.
Teraz wydaje mi się, że już jest całkiem nieźle.
Karty są wystarczająco szerokie, aby się tu fajnie zaprezentować.
My możemy jechać niżej.
Powiedzmy do 7 6, 8 jest ok.
Karty są w porządku, mapka jest w porządku.
Tam nam zniknęły te kategorie i musimy tutaj dodać padding.
Jak widzisz też nam zniknął.
A więc wróćmy do tej grupy Top.
I dodajmy top padding.
Równy.
Jak będzie 16 pikseli powinno być ok.
Już dużo lepiej to wygląda.
I to co pewnie będziemy musieli zrobić to na 5, 7, 6.
Zjechać już do tej jednej karty.
Czyli mogę sobie zaznaczyć to result group.
Skopiować, wkleić.
I tym razem będzie to jedna kolumna.
I powiedzmy, że trzy rzędy.
OK.
I teraz treść całej naszej strony wygląda już zdecydowanie lepiej.
Moglibyśmy jeszcze zadbać o odstępy, ale to pozostawiam już Tobie.
Na ekranie mobilnym prezentuje się to już tak, jak powinno.
Natomiast nie jest to jeszcze koniec
naszej pracy, ponieważ musimy zadbać o ten nagłówek, odpowiednio go sobie
wyrównać i dodatkowo oczywiście zadbać o naszą wyszukiwarkę.
A więc wracamy do edytora.
Zerknijmy na ten nagłówek.
Co tutaj się dzieje?
Mamy tutaj wyrównanie do lewej krawędzi jest ok.
Czy mamy tutaj jakieś condition all?
Mamy, ale to powinno mieć tylko.
Aha, już widzę mamy tutaj tak złe centrowanie.
Oczywiście powinien być wyrównany do lewej krawędzi.
Teraz oczywiście.
Wygląda to już tak jak powinna.
Zgadza się, a więc możemy przejść do.
I tak nam zależy tutaj na tej grupie.
Advanced Search Group spróbuje nam pokazać.
Coś jest nie tak, ale zaraz do tego dojdziemy.
Mamy tutaj layout fit right to content.
Natomiast w środku co mamy w środku mamy.
Aha, mamy serwera, czyli element.
Tu właśnie pojawia się główny problem kiedy zagnieżdża się jeden element w
drugim i przystępujemy do edycji stylów i dostosowania go pod RWD.
Ale niestety będziesz musiał do tego
przywyknąć, ponieważ tak to właśnie w Babel działa.
Przechodzimy do Edit Element.
Zerknijmy w ogóle na cały ten apel.
OK, nie ma tutaj żadnej minimalnej wysokości.
Możemy sobie zerknąć.
Powiedzmy, że to 98 pikseli, bo tyle.
To mi teraz pokazuje ten edytor.
Wróćmy na chwilę sobie do
nas bara i zerknijmy, czy teraz nam to będzie działało.
Spróbujmy to pokazać.
Dalej nie. Ale to nic.
Tym się chwilowo nie przejmujemy, ponieważ
to, co nas bardziej interesuje, to tak naprawdę cały ten element.
Oczywiście tu moglibyśmy zastosować pewną sztuczkę ze zwiększeniem wysokości do 390.
Jak widzisz teraz widzimy tutaj ten start, ale i tak musimy przejść bezpośrednio do
niego, żeby tutaj wprowadzić jakiekolwiek zmiany.
Klikam więc jeszcze raz Edit element i przystępuje do odpowiednich ustawień.
OK, to pozostawiamy.
Przede wszystkim tak dodaje pierwsze.
Oczywiście jako warunek.
I tu odnoszę się do 1.
200.
Już dlatego break point będę chciał
zmniejszyć padding i odstępy z 32 do 16 dla kolumn GAP.
A więc.
Wszystkie padding i.
Ustawmy na 16 pikseli.
I jeszcze kolumna.
Również na szesnaście pikseli.
Kolejno.
Zerknijmy jak mamy tutaj zorganizowane elementy w środku.
OK. One są teraz ubierane w osobne grupy.
To co mogę zrobić, to spróbować.
Przejść do tego przycisku.
To conditions a.
I dla.
Właśnie widoku tableta owego, czyli 10, 2 nadać mu tutaj minimalną szerokość.
Równą 100%.
Wtedy ta grupa powinna mi skoczyć w jedną
linię, a z drugą zaraz zobaczymy czy tak się stanie.
Odświeżę.
Zjedziemy do odpowiednio niskiej tutaj rozdzielczości.
OK. Już jest całkiem, całkiem fajnie.
Oczywiście musimy zadbać o Games Passing tutaj na RoF.
I domyślnie dać mu tutaj myślę, że 24 piksele.
OK, zacznijmy zjeżdżać niżej.
To jak widzisz tę grupę zaczynają nam przeskakiwać, więc może odnieść się do 7,
6, 8 i dajmy maksymalną szerokość dla tej grupy San Francisco, ponieważ ona
tak naprawdę będzie najdłuższa tutaj do pisania.
A więc.
Cała ta grupa Location Group.
7 6, 8.
Dominuje.
100%.
Odświeżamy.
Jest ok.
Nie potrzebujemy tego DVD tutaj, więc możemy się go pozbyć.
Kopiuję sobie ten condition, ale zaznaczam ten DVD.
Collapse hidden i ukrywamy go tutaj.
Teraz tak kopiuję sobie cały ten warunek i zaznaczam sobie te dwa DVD,
ponieważ będę chciał ukrywać, jak się domyślasz tutaj 2 5, 7 6.
Dlaczego chcę je ukrywać? Ponieważ dlatego.
Dlatego właśnie Break point 5, 7 6 7 6 8. Skopiuj.
Zobaczmy, czy tutaj wskoczyło to w odpowiedni.
OK, to jest właściwe, więc mogę.
Co znaczy ten conditions.
I teraz te grupy po prostu rozciągnąć na całą dostępną szerokość.
Właśnie dla takiego back point.
Stawić im 100%.
I zerknijmy. Teraz wejdźmy na przykład do 425.
OK.
I teraz wygląda to naprawdę całkiem fajnie.
Musielibyśmy zadbać o to, żeby ta grupa
tutaj się dostosowywała, bo teraz właśnie wychodzi nam to chyba poza tą
grupę, bo nie nadaliśmy tam w ogóle żadnego koloru.
Natomiast to już jest zadanie dla Ciebie.
Myślę, że sobie z nim spokojnie poradzisz.
Natomiast nasza wyszukiwarka działa już całkiem fajnie, ale brakuje mi tutaj
jednego elementu, ponieważ na 7, 6, 8 o ile dobrze pamiętam.
Tak ukrywamy tutaj całą tą grupę z
kategoriami, a także nasz przycisk z filtrami.
Dlatego też musimy zadbać o to, aby ten przycisk przenieść tutaj do naszej
wyszukiwarki i za jego pomocą właśnie w widoku mobilnym
użytkownik będzie mógł otworzyć nasz popup.
Natomiast sam popup oczywiście też jest
niedostosowany do widoku mobilnego, ale to jest Twoje zadanie domowe.
Wiesz już jak operować tutaj tymi warunkami, aby tworzyć widoki responsywne,
a ja zajmę się tylko tutaj przeniesieniem tego guzika.
Przechodzę więc sobie do serca.
Zaznaczam.
W sobie całą tą grupę.
Ponieważ zawiera ona zarówno przycisk, jak i ten counter oraz ten z CORBA.
Ale robię to w ten sposób, czyli kopiuję tutaj tą grupę A Replay Filters Group.
Wracam do serwera.
I wstawiam ją tutaj.
Tak chcę się tutaj pozbyć tego scroll bara tego odniesienia do pluginu.
Jest on nam niepotrzebny.
A więc oczywiście Dawid.
Natomiast tak całą grupę chce domyślnie ukryć.
I oczywiście pokazywać ją dopiero wtedy,
kiedy znika cała ta sekcja z kategoriami, czyli.
7 6, 8.
This is visible.
I to, co jeszcze możemy tutaj zmienić.
To ten tekst.
Ja go zmienię tutaj na Search and.
Add Filters.
I zerknijmy teraz.
Przejdźmy do widoku 425.
Kategorie nam zniknęły, a nam tutaj się pojawił oczywiście Button.
Musimy jeszcze tylko zadbać o to, żeby on się rozciągnął na całą szerokość i był
właściwie odpowiednio odsunięty, ponieważ ten kołder nam delikatnie wychodzi.
A więc jak widzisz, zawsze czeka nas trochę zabawy.
To co mogę tutaj ustawić to.
Margin tutaj dla całej tej grupy bottom.
OK, możemy wyzerować, ale margin top.
Tutaj chcę dodać 12 pikseli.
A dla batona odznaczyć tu content.
I to w zasadzie wszystko, co musieliśmy zrobić.
A chyba nie, do czego nam się to tutaj odpowiednio nieraz ciągnęło.
A oczywiście mamy dla całej tej grupy zaznaczone fit content.
Musimy się tego pozbyć, żeby ona się
rozciągała z automatu na całą dostępną szerokość.
I teraz już chyba jest ok.
A teraz wszystko się zgadza.
Mógłbyś oczywiście jeszcze dostosować
wysokość tego przycisku tak, żeby pasował do tego górnego.
Ja to zaraz zrobię.
Natomiast nasza praca w tej lekcji już jest skończona.
Mamy za sobą w zasadzie już dwie główne
strony, czyli stronę listingu stron search.
Pozostaje nam jeszcze do poprawy strona
indeksowania, ale tym zajmiemy się już w kolejnej lekcji.
Dziękuję Ci za uwagę i widzimy się za.