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

CSS - reponsywny grid

0 głosów
118 wizyt
pytanie zadane 24 kwietnia 2017 w HTML i CSS przez kralcz88 Obywatel (1,640 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 Szeryf (91,470 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 (68,800 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,640 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 (21,830 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ź 85 wizyt
pytanie zadane 14 maja 2017 w HTML i CSS przez kralcz88 Obywatel (1,640 p.)
–1 głos
1 odpowiedź 55 wizyt
pytanie zadane 5 stycznia w HTML i CSS przez pomaraqcz Początkujący (380 p.)
0 głosów
0 odpowiedzi 89 wizyt
pytanie zadane 16 sierpnia 2017 w HTML i CSS przez Patrick Nowicjusz (120 p.)
Porady nie od parady
Zadając pytanie postaraj się o szczegółowe opisanie problemu oraz udostępnienie wszystkich istotnych informacji (kody źródłowe, zrzuty ekranu itp.).Opisanie problemu

63,367 zapytań

109,637 odpowiedzi

229,049 komentarzy

44,351 pasjonatów

Przeglądających: 238
Pasjonatów: 20 Gości: 218

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...