Zanikający margines (nie wiem jak to nazwać :D)

Question

Hej wszystkim :D

Ogólnie moje pytanie może trochę z innej beczki ale nigdzie nie mogę znaleźć odpowiedzi. Przykładowo wejdźcie sobie na wp.pl i pobawcie się trochę wielkością okna przeglądarki (najlepiej jak będziecie mieli szeroki monitor). Jak zwrócicie uwagę to margines z lewej i prawej tak jakby zanika do zera. Jak tworze stronę to zazwyczaj u mnie zachowuje stałą wartość np. https://dzony6969.github.io/miastokrk2.github.io/ (wyrażoną w procentach). Jak zrobić taki zanikający margines? media queries czy jest jakiś prostszy sposób? (nie wiem czy dość zrozumiale to napisałem ale chyba jaśniej nie umiem :D)

Answer 1

Tam po pierwsze masz max-width a po drugie media query.

Answer 2

Cześć :)

Strona www ma domyślnie ustawioną wartość font{} jak wiesz, domyślny color{}, jak również margin{} i padding{}. Pisząc w stylach css *{} ustalasz wartości globalne dla strony. Tam wyzeruj padding oraz margin na 0, potem ustaw element na stronie na 100% szerokości i znikną marginesy po bokach.

Answer 3

Prawdopodobnie użyto dwóch wartości width:100%; i np. max-width: 1600px; Co przy ekranach węższych niż 1600px; powoduje, że marginesu nie ma. Kolejność ma znaczenie.

Answer 4

Ok, popróbuje przy następnej stronie coś z tym zrobić :D

 

dzięki za odpowiedzi

Comments

Jeżeli strona nie jest responsywna np jak The Next Web to proponuje ustawić po prostu width dla body na 100% i masz pewność że Ci to nie bedzie uciekać za okno przeglądarki.

---

Właśnie chce żeby była responsywna w stylu landing page :D po prostu zauważyłem, że w większości "nowoczesnych stron", (że tak powiem) marginesy nie są ustawione wartościami stałymi(procentowymi) tylko po prostu  zanikają :) ale już widzę, dzięki wam, że można to ustawić max-width i mediami:D

---

Bez media. Poprostu pakujesz stronę w kontener

.container{
margin: 0 auto;
width: 100%;
max-width: 1600px;
...
}