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

Czemu siatka nie działa?

VPS Starter Arubacloud
0 głosów
136 wizyt
pytanie zadane 6 lipca 2018 w HTML i CSS przez Layoutowiec Mądrala (5,470 p.)
edycja 6 lipca 2018 przez Layoutowiec

Witam!
 

Więc zmieniłem kod mojej strony siatkę CSS ale coś chyba nie działa bo nie zmniejsza się to w taki sposób w jaki powinno ponieważ podczas zmniejszania trzecie zdjęcia w obu rzędach nie zmniejszają się i przez to na dole strony pojawia się pasek przewijania lewo-prawo 

<section>
    <div class="container1">
        <div class="row">
            <div class="col-4" style=" margin-top: 40%;">
                <img src="img/nature.jpg"  alt="alternative text"></a>
            </div>
            <div class="col-4" style=" margin-top: 40%;">
                <img src="img/mountains.jpg"  alt="alternative text"></a>
            </div>
            <div class="col-4" style=" margin-top: 40%;">
                <img src="img/sea.jpg" alt="alternative text"></a>
            </div>
            <div class="col-4" >
                <img src="img/cliff.jpg" alt="alternative text"></a>
            </div>
            <div class="col-4">
                <img src="img/city.jpg"  alt="alternative text"></a>
            </div>
            <div class="col-4">
                <img src="img/freedom.jpg" alt="alternative text"></a>
            </div>
        </div>
    </div>
</section>

.container1
{
    width: 100%;
    max-width: 1170px;
    margin: 0 auto;
    padding: 0 0 0 1%;
}
 
.row {
    clear: both;
}
 
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
    float: left;
    margin: 0 3% 0 0;
}

.col-4
{
    margin-left: 0;
    margin-right: 0;
}

@media screen and (min-width:768px)
{
	.col-1 {width: 5.5%;}
	.col-2 {width: 14%;}
	.col-3 {width: 22.5%;}
	.col-4 {width: 31%;}
	.col-5 {width: 39.5%; }
	.col-6 {width: 48%;}
	.col-7 {width: 56.5%;}
	.col-8 {width: 65%;}
	.col-9 {width: 73.5%;}
	.col-10 {width: 82%;}
	.col-11 {width: 90.5%;}
	.col-12 {width: 99%;}
}

No i co teraz trzeba zrobić aby to było tak jak ma być ?

Mam nadzieję że ktoś mi pomoże ;)

Dzięki za poświęcony czas!

1 odpowiedź

0 głosów
odpowiedź 7 lipca 2018 przez pablop76 VIP (123,060 p.)
edycja 7 lipca 2018 przez pablop76
Ponieważ jest użyta niepoprawnie. Cyferka w klasie col- oznacza, ile z dwunastu dostępnych kolumn zajmuje element oznaczony daną klasą. Suma tych warości musi być równa 12. Czyli col-4 zmieści się trzy razy bo 3*4=12. Dodatkowo brakuje kilku elementów siatki. Clear dla row nie jest potrzebny, nztomias jest konieczny element czyszczący przepływ kolymn. Dla poprawienia wyglądu dodaje się tzw.  rynny do kilumn. Cały przyklad i filozofia siatki jest w sposób przystępny opisana na w3school
komentarz 7 lipca 2018 przez pablop76 VIP (123,060 p.)
Zależy od layoutu. Zauważ, że w tym przykładzie jest tylko jeden break point.
komentarz 7 lipca 2018 przez Layoutowiec Mądrala (5,470 p.)
Ok ale co z moim layoutem. Jak powinienem zmienić kod
komentarz 7 lipca 2018 przez Layoutowiec Mądrala (5,470 p.)
To pomożesz mi edytować kod?
komentarz 7 lipca 2018 przez pablop76 VIP (123,060 p.)
Ale co mam Ci jeszcze pomóc? Popraw co masz według tego co Ci dałem.

Jeżeli masz trzy elementy to dzielisz siatkę na trzy czyli col-4 :) w jednym rzędzie - row
komentarz 7 lipca 2018 przez Layoutowiec Mądrala (5,470 p.)
Zmieniłem ale ciągle nie działa. Proszę powiedz jak powinien wyglądać kod

Podobne pytania

0 głosów
1 odpowiedź 390 wizyt
pytanie zadane 5 października 2018 w HTML i CSS przez Layoutowiec Mądrala (5,470 p.)
0 głosów
1 odpowiedź 269 wizyt
0 głosów
1 odpowiedź 206 wizyt
pytanie zadane 26 czerwca 2019 w JavaScript przez fff Gaduła (3,950 p.)

92,452 zapytań

141,262 odpowiedzi

319,085 komentarzy

61,854 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

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

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!

...