Problem responsywność

pytanie zadane 8 maja 2017 w HTML i CSS przez agit45 Obywatel (1,110 p.)
edycja 11 maja 2017 przez agit45

Witam zacząłem robić stronę i chciałem aby była responsywna więc zacząłem od strony dla telefonów i potem chciałem użyć media queries dla innych rozdzielczości lecz napotkałem problem gdy w narzędziach programisty sprawdzam wygląd na różnych rozdzielczościach to jest ok ale w przypadku gdy wybieram opcję responsive zamiast modelu telefonu i zmniejszam wysokość strony to tekst wychodzi poza obszar diva.

Link do strony: http://naukacss.5v.pl/ oraz link do dokładnego zdjęcia o jaki efekt mi chodzi: http://imgur.com/a/thd4x

2 odpowiedzi

odpowiedź 8 maja 2017 przez xmentor Nałogowiec (49,520 p.)
wybrane 8 maja 2017 przez agit45

Najlepsza

Bo brakuje clearfix-u dla rodziców elementów, które posiadają opływanie(float).

https://css-tricks.com/snippets/css/clear-fix/

komentarz 8 maja 2017 przez agit45 Obywatel (1,110 p.)

Dzięki wielkie! Zapomniałem zupełnie o tym :D

odpowiedź 8 maja 2017 przez Wujek Greg Dyskutant (9,410 p.)

dla diva .carbox masz nadana min-height:100vh. wiec jeżeli zmniejszasz wysokosc ekranu to automatycznie zmniejsza sie div. Bezpieczniej bedzie dac min-height w pixelach

komentarz 8 maja 2017 przez agit45 Obywatel (1,110 p.)

to dawanie wysokości w vh jest złe? jeżeli dam w px to to się nie będzie skalować wraz z powiększaniem ekranu czy to nie jest gorsze?

komentarz 8 maja 2017 przez Wujek Greg Dyskutant (9,410 p.)

Generalnie vh zalecałbym dodawać np. do tła żeby zawsze pogrywało 100% strony, jeżeli chodzi o jakiś box w którym jest treść ograniczanie wysokości relatywnymi jednostkami może być problematyczne. Zastosowałeś floata więc tak jak kolega wyżej napisał musisz zastosować clearfixa, ja jednak jestem zdania że floata powinno się używać w ostateczności. Polecam użyć flexboxa, masz tutaj poradnik:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/