Jak rozłożyć ten tekst

Question

Witajcie,

próbuje rozłożyć tekst w html w sposób pokazany poniżej. Jak tego dokonać i jak zrobić żeby rozkład tej strony automatycznie dostosowywał się do ekranu telefonu?

Początkujący jestem w temacie. 

Dziękuje.

Answer 1

Nie chce Ci podsyłać dokładnego rozwiązania. Jeśli chcesz dowiedzieć się jak tworzyć responsywne strony (takie pasujące pod telefon poczytaj o bootstrapie. Co do ustawienia tekstu możesz zastosować właściwość css margin

Comments

Nie pakowałbym kogoś bez znajomości podstaw w bootstrap-a. Bootstrap ułatwia i przyśpiesza mocno pracę ale nie polecałbym go komuś na początku drogi.

Tutaj lepiej to rozwiązać za pomocą  @media

---

@pawi125, Dziękuje, a mógłbyś wypunktować kilka rzeczy, które są ważne w utworzeniu takiego layout-u? 

Answer 2

Wrzuć kod który masz teraz napisany to powiem Ci jak to zapisać.

Comments

No własnie to początek. Nie wiem jak i z czym połączyć. Może daj kilka podpowiedzi, a ja spróbuje krok po kroku to wykonać.

---

W pliku html zapisz <p> i nadaj im class. Później w css ustaw:

.class{font-size: 14px;}

@media(min-width: 576px){

.class{font-size: 16px;}

}

@media(min-width: 768px){

.class{font-size: 18px;}

}

@media(min-width: 991px){

.class{font-size: 20px;}

}

@media (min-width: 1200px){

.class{font-size: 24px;}

}

To tylko przykładowe wartości, sam musisz do dopasować według swoich preferencji.

---

Super, zadziałam co pewnie zajmie trochę czasu  i ewentualnie dopytam Cię. Dziękuje.

---

@lapa19904, Pomału działam.  W między czasie dopytam jak zrobić żeby dopasowywał się ten layout do każdego ekranu telefonu?

---

Co konkretnie chcesz ustawić pisząc o dopasowaniu pod konkretny telefon? Jeśli marginesy lub pozycjonowanie to proponuję ustawić je procentowo. Możesz dodać @media poniżej 576px co 50-100px dopasowując się idealnie pod szerokości mobilne ale to jest zależne od konkretnego projektu i Ja raczej tego unikam.

---

Tak, mam na myśli marginesy i pozycjonowanie. Jeśli radzisz  procentowo to tego się będę trzymał. Mógłbyś proszę dać przyklad takiego ustawienia procentowo?

Przyznam Ci się, że mam kłopot jak nadać class znacznikowi  <p> i ddlaczego się to robi :(

---

czy to chodzi o cos takiego?

<p class="nazwaklasy"></p>

a potem w css

.nazwaklasy {..}

ale wciaz nie wiem po co sie to robi

---

Tak, klasy nadaję się w ten sposób. Dlaczego się tak robi?

Wyobraź sobie witrynę z kilkoma podstronami mającymi różne layouty lub nawet jedną witrynę gdzie <p> występuje kilkanaście razy i chcesz nadać im różne rozmiary czcionek, marginesy, czy kolory. Bez dodania klas zmieniasz margines dla <p> na dole strony i psuję Ci to wygląd pozostałych <p> na stronie. Miedzy innymi dla tego właśnie nie styluję się w css po tagach html.

Rozumiesz?

P.S. Wiadomo są wyjątki jak na przykład w nawigacji wordpress-a gdzie klasę możesz nadać dla containera nawigacji czy dla ul ale dla li czy linków wewnątrz już nie możesz, a robisz template z bootstrapem gdzie elementy są stylowane po tagach html z important!;

Są to tylko wyjątki i nie jest to częste.

---

Acha dobrze,

czyli w tym moim przypadku potrzebne będą trzy różne nazwy klas dla oddzielenia znaczników. I klasy idą do pliku html.

Sprobuje napisac to co omowilismy i dam Ci do oceny.

Głowie sie jeszcze nad zrozumieniem tego PS.  'template z bootstrap' , '..stylowane po tagach html important!' ..czarna magia na tą chwile :)