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

CSS - reponsywny grid

VPS Starter Arubacloud
0 głosów
227 wizyt
pytanie zadane 24 kwietnia 2017 w HTML i CSS przez kralcz88 Obywatel (1,810 p.)
Witam!

Mam pytanie jak założyć media query dla diva, którego szerokością steruje grid.

<div class="col-4">.....</div> //Tutaj div zajmuje mi 25% szerokości

Chciałbym, żeby dla breakpoint max-width/: 767px, szerokość diva zmieniła się na 50% czyli .col-6

W jaki sposób zapisać regułę media query?

3 odpowiedzi

0 głosów
odpowiedź 25 kwietnia 2017 przez pablop76 VIP (123,060 p.)
wybrane 25 kwietnia 2017 przez kralcz88
 
Najlepsza

Witam. NIe zapomnij dodać <meta name="viewport" content="width=device-width, initial-scale=1.0">

Tak wygląda szkielet css.

grid na podstawie https://www.w3schools.com/css/css_rwd_intro.asp

Jak doczytasz dalej zastosowano zasadę first mobile i odwrócone media. Tzn media queries zastosowana dla monitorów a domyślne stylowanie dla tabletów itp.

0 głosów
odpowiedź 24 kwietnia 2017 przez Eimens Maniak (69,240 p.)

Korzystasz z BS'a? 

Robi się coś takiego:

<div class="col-sm-6 col-md-5 col-lg-6">zawartość</div>

col-sm-6 - sm oznacza się szerokość elementu dla małego ekranu (small).

jeżeli chcesz żeby na małych urządzeniach element miał szerokość 100% to do diva dodajesz col-xs-12 (dla bardzo małych ekranów), a dla większych miał 6 to dajesz col-md-6 i tak dalej.

http://getbootstrap.com/css/#grid-media-queries

komentarz 24 kwietnia 2017 przez kralcz88 Obywatel (1,810 p.)
Nie korzystam z Bootstrapa  w tym projekcie, ale samemu napisze sobie regułę dla klasy col-sm-6.

Dzięki za podpowiedź!
0 głosów
odpowiedź 25 kwietnia 2017 przez hoktaur Pasjonat (22,250 p.)

Coś takiego ?:

<!doctype html>
<html lang=”pl”>
<head>
	<title>eMagi</title>

	<meta charset="UTF-8">

	<meta name="description" content="Opis naszej strony">
	<meta name="keywords" content="Tutaj słowa kluczowe oddzielone przecinkiem">

	<!--[if lt IE 9]>
	    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
	<link rel="stylesheet" href="./CSS/desktop.css" />
  <link rel="stylesheet" href="./CSS/clock.css" />

  <style>
    .test {
      width: 25%;
      border: 1px solid black; 
    }

    @media screen and (max-width: 767px) {
      .test {
        width: 50%;
      }
    }

  </style>

</head>
<body>

<div class="test"></div>

</body>
</head

https://developer.mozilla.org/pl/docs/Web/CSS/Media_Queries/Using_media_queries

Podobne pytania

0 głosów
1 odpowiedź 144 wizyt
pytanie zadane 14 maja 2017 w HTML i CSS przez kralcz88 Obywatel (1,810 p.)
–1 głos
1 odpowiedź 252 wizyt
pytanie zadane 5 stycznia 2019 w HTML i CSS przez pomaraqcz Początkujący (380 p.)
0 głosów
0 odpowiedzi 167 wizyt
pytanie zadane 16 sierpnia 2017 w HTML i CSS przez Patrick Nowicjusz (120 p.)

92,454 zapytań

141,263 odpowiedzi

319,099 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!

...