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

Reponsywność strony

Object Storage Arubacloud
0 głosów
178 wizyt
pytanie zadane 16 marca 2023 w HTML i CSS przez KonDZIKs Bywalec (2,770 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 (254,490 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,770 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 129 wizyt
+1 głos
3 odpowiedzi 1,033 wizyt
pytanie zadane 18 września 2020 w HTML i CSS przez KosaTV Obywatel (1,260 p.)
0 głosów
1 odpowiedź 304 wizyt

92,669 zapytań

141,567 odpowiedzi

320,033 komentarzy

62,034 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.

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...