• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Reponsywność strony

Aruba Cloud - Virtual Private Server VPS
0 głosów
266 wizyt
pytanie zadane 16 marca 2023 w HTML i CSS przez KonDZIKs Bywalec (2,850 p.)
Witam.
Mam pytanie odnośnie responsywności strony. Dodałem nowe elementy na stronie i jak np udało mi się zrobić to, że elementy na telefonie wyświetlają sie poprawnie w formie kolumny, lecz jest taki problem, że są one za duże nie skalują sie tak jakby swoim rozmiarem do okna.

Np jest sytuacja, że dla rozmiaru okna mniejszy od 1200 x 1080 część prawego elementu jest ucięta. Czy mogę jakoś za pomocą @media ustawić to skalowanie czy bardziej za pomocą .col?
Dodam, ze dla box2 wszystko się ładnie "kurczy" i rozszerza a dla box i squerów to się nie dzieje.

A chciałbym żeby do pewnej wartości te elementy się kurczyły a dopiero później ustawiały się w kolumnę. Podobnie jest z main_txt wystaje poza obrys urządzenia.

https://codepen.io/Kondziks/pen/GRXGZPq
komentarz 16 marca 2023 przez Szarlotka Użytkownik (890 p.)
Masz dużo literówek ('felx' zamiast 'flex' - linijka 80, 93). Dla diva z klasą .font masz ustawiony flex-flow: ... nowrap. Zmień to na 'wrap'.
komentarz 18 marca 2023 przez VBService Ekspert (256,600 p.)

No i w css, do komentowania kodu używamy zapisu

/* Comment */

/*
  A comment
  which stretches
  over several
  lines
*/

 

komentarz 19 marca 2023 przez KonDZIKs Bywalec (2,850 p.)
Ehhh bardzo dużo głupich błędów z mojej strony. Aż wstyd sie przyznać do czegoś takiego.
Dziękuję za uwagi, poprawię to,
Lecz wracając do zadanego pytania. Doczytałem, że .col używa się bardziej do siatek niż do flex boxów więc zostaje raczej ta metoda z @media. Dobrze mi się wydaje?

1 odpowiedź

0 głosów
odpowiedź 20 marca 2023 przez kozacko Obywatel (1,580 p.)

Zaczynając od podstaw:

Jeśli chcesz by twoja strona była responsywna a nie używasz @media to przestrzegaj się nadawania:
 

  width: 360px;

w wartościach " px " to totalnie rozjeżdża twoją stronę.

 

Widać, że chcesz tutaj zastosować, zbyt wiele technologi na RWD. Co jest złą praktyką.

Jeśli chcesz tworzyć RWD strony to fajnie by było przeczytać o flex-boxach czy gridzie.

Wg mnie najprostszą techniką responsywności jest na początek zapoznanie się z boostrapem.

Podobne pytania

0 głosów
0 odpowiedzi 170 wizyt
+1 głos
3 odpowiedzi 1,616 wizyt
pytanie zadane 18 września 2020 w HTML i CSS przez KosaTV Obywatel (1,260 p.)
0 głosów
1 odpowiedź 435 wizyt

93,327 zapytań

142,323 odpowiedzi

322,396 komentarzy

62,656 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...