Dołącz do zespołu ekspertów! Backend lub Frontend Developer?

Sprawdź najnowsze oferty pracy naszego partnera - 8lines.io!

RWD

Założony przez  szymex71.

Ostatnio zabrałem się za przerabianie mojej strony by była jeszcze "bardziej responsywna". Bo generalnie niby jest dobrze, nic nie ucina, ale to jeszcze nie jest to.

Przede wszystkim czemu nie zmniejszają się działy. Nie wiem jak to powiedzieć, najłatwiej sprawdzić przez zbadaj element i zmniejszając stronę. 
Do 1000px (lecąc w dół) wszystko ładnie się przemieszcza. Od 1000px sidebar leci pod fora (i dobrze) ale same w sobie fora już się nie zmniejszają tylko trzymają sztywno swoją szerokość. Na telefonie niby tego nie ma, ale strona jest tak jakby na oddaleniu a nie tak jak np. tutaj.
No i drugie pytanie, które w sumie wiąże się z końcem pierwszego, gdy wchodzi się na telefonie na stronę to jest się na "zoomie" w lewym górnym rogu. Co zrobić by była cała widoczna od razu?
No i póki co ostatnie pytanie. Gdy się zmniejsza stronę (zbadaj element) to w pewnym momencie znikają posty/wątki (liczby). W sumie dobrze, bo nie będzie najeżdżać na siebie ale, czemu w miejsce "ostatnie posty" wstawia się "wątków"?

Z RWD dopiero zaczynam, generalnie co nieco łapię ale jeszcze sporo do nauczenia :E
Z góry dzięki za pomoc
1.
Nie zmniejsza się dalej ponieważ w #container posiadasz styl:
min-width: 990px;

2.
Nie mam pojęcia ale jak się dowiem to Ci napisze xD // Ale to powinno się zmienić gdy zrobisz punkt 1.

3.
W forumbit_depth1_forum oraz forumbit_depth2_forum musisz w ostatnim <td class="trow... dodać:
colspan="3"


Oraz w css zamienić:
.forums table td:nth-child(3), .forums table td:nth-child(4), .ucp-threads table td.trow1:nth-child(4), .ucp-threads table td.trow2:nth-child(4), .ucp-threads table td.trow1:nth-child(5), .ucp-threads table td.trow2:nth-child(5), .ucp-threads table td.tcat:nth-child(2), .ucp-threads table td.tcat:nth-child(3), .dnone

na:
.forums table td:nth-child(2), .forums table td:nth-child(3), .ucp-threads table td.trow1:nth-child(4), .ucp-threads table td.trow2:nth-child(4), .ucp-threads table td.trow1:nth-child(5), .ucp-threads table td.trow2:nth-child(5), .ucp-threads table td.tcat:nth-child(2), .ucp-threads table td.tcat:nth-child(3), .dnone
1. Rzeczywiście działa :D 

3. Nie mam forumbit_depth1_forum :E A forumbit_depth2_forum wygląda tak:

<tr>
<td class="{$bgcolor}" align="center" width="1"><div class="forum_status forum_{$lightbulb['folder']} ajax_mark_read" title="{$lightbulb['altonoff']}" id="mark_read_{$forum['fid']}"></div></td>
<td class="{$bgcolor}">

<a href="{$forum_url}" class="ttip">{$forum['name']}<span class="ttbg">{$forum['description']}</span></a>{$forum_viewers_text}{$modlist}{$subforums} <br />

</td>
<td class="{$bgcolor} dnone" align="center" style="white-space: nowrap">{$threads}{$unapproved['unapproved_threads']}</td>
<td class="{$bgcolor} dnone" align="center" style="white-space: nowrap">{$posts}{$unapproved['unapproved_posts']}</td>
<td class="{$bgcolor}" align="right" style="white-space: nowrap;">{$lastpost}</td>
</tr>
To:
<td class="{$bgcolor}" align="right" style="white-space: nowrap;">{$lastpost}</td>

Na to:
<td class="{$bgcolor}" colspan="3" align="right" style="white-space: nowrap;">{$lastpost}</td>
No nie do końca. 
Tak to teraz wygląda (pokazuję screen bo wróciłem już do poprzedniej wersji by nie robić bałaganu - "pracuję" na domyślnym stylu.)
   
Jak nie chcesz robić bałaganu w głównym stylu to go sklonuj i daj jako testowy żebym na testowym koncie mógł go ustawić. Ze screena nie wywnioskuje co jest źle.

//Tylko zedytuj go tak jak Ci pisałem wyżej.
No tam gdzie masz "linie, pasy ruchu" itp. jest rozjechane..
Dodatkowo gdy niby wróciłem do poprzedniego to dalej jest coś nie tak - 
   

wróć, nie usunąłem colspan3. Czyli jestem w punkcie wyjścia.

Tak więc pozostaje sprawa rozjechanych działów
http://prntscr.com/hjdr1d

Ustawiłem colspan="3" we wszystkich ostatnich <td> z ostatnim postem oraz zedytowałem css tak jak podałem wyżej.

Zrób to tak jak Ci wyżej podałem i zostaw. Jak coś będzie źle to przynajmniej będę miał wgląd w console.
Już, cały czas się rozjeżdża.
Bo musisz jeszcze zedytować forumbit_depth2_cat (którego wyżej nie podałem). Wtedy powinno wszystko działac.
No dobra, teraz jest już niby okej. Tylko jak zrobić by nazwa działu zostawała (by znikały tylko liczba wątków/postów)
No i strona na komórce dalej jest taka jakby pomniejszona, nic się nie zmieniło. I dalej po wejściu jest zoom na lewy górny.
W css podmień na:
.forums table td.tcat:nth-child(2), table td:nth-child(3), .ucp-threads table td.trow1:nth-child(4), .ucp-threads table td.trow2:nth-child(4), .ucp-threads table td.trow1:nth-child(5), .ucp-threads table td.trow2:nth-child(5), .ucp-threads table td.tcat:nth-child(2), .ucp-threads table td.tcat:nth-child(3), .dnone

A w szablonie forumbit_depth1_cat w komórce od ostatniego posta dodaj:
colspan="2"

I w <td class="thead"> zmień colspan="5" na 6
Liczba postów dalej zostaje, dodatkowo na głównej bez zmniejszania się trochę poprzestawiały. Nie są równo
w tym zamieszaniu usunąłem "display:none"
więc wszystko znika/pojawia się już jak powinno tylko liczba postów/wątków w każdej kategorii jest inaczej ustawione (bardziej w lewo/w prawo)

No i w ciągu dalszym w chrome na kompie (zbadaj element) wszystko ładnie się zmniejsza, przesuwa, skaluje, a na telefonie dalej strona wygląda jakby z "wersji na komputer" (pod względem skalowania samej w sobie strony jako takiej. Elementy typu liczba postów/wątków, wygląd postu itp. wyświetlają się poprawnie)
Nie rozumiem dlaczego korzystasz z wersji Flatty, która nie jest responsywna, dawno wyszła responsywna wersja tego szablonu, utrudniasz sobie robotę.
Właśnie rzecz w tym że korzystam z tej responsywnej :) Tylko jak widać responsywna w pełni jednak nie jest



Użytkownicy przeglądający ten wątek:

2 gości