Reponsywność strony

Question

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

Comments

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'.

---

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

/* Comment */

/*
  A comment
  which stretches
  over several
  lines
*/

 

---

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?

Answer 1

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.