Responzivita 2: přidat řešení ke cvičením

Czechitas-podklady-WEB · Sep 13, 2023 · bf4c4bb · bf4c4bb
1 parent 7603de4
commit bf4c4bb
Show file tree

Hide file tree

Showing 5 changed files with 124 additions and 0 deletions.
diff --git a/html-a-css/responzivni-design/cvresponsive/banner/exercise.md b/html-a-css/responzivni-design/cvresponsive/banner/exercise.md
@@ -15,3 +15,19 @@ HTML není potřeba nijak upravovat.
 
 Výsledek bude vypadat takto:
 ::fig[responsive banner result]{src=assets/banner-result.gif}
+
+:::solution
+
+```css
+.banner {
+  display: none;
+}
+
+@media (min-width: 800px) {
+  .banner {
+    display: block;
+  }
+}
+```
+
+:::
diff --git a/html-a-css/responzivni-design/cvresponsive/galerie/exercise.md b/html-a-css/responzivni-design/cvresponsive/galerie/exercise.md
@@ -22,3 +22,41 @@ HTML není potřeba nijak upravovat.
 
 Výsledek bude vypadat takto:
 ::fig[responsive layout result]{src=assets/galerie-result.gif}
+
+:::solution
+
+```css
+.foto img {
+  width: 100%;
+}
+
+@media (min-width: 500px) {
+  .galerie {
+    display: flex;
+    flex-wrap: wrap;
+  }
+  .foto {
+    width: 50%;
+  }
+}
+
+@media (min-width: 650px) {
+  .foto {
+    width: calc(100% / 3);
+  }
+}
+
+@media (min-width: 800px) {
+  .foto {
+    width: calc(100% / 4);
+  }
+}
+
+@media (min-width: 1000px) {
+  .foto {
+    width: calc(100% / 6);
+  }
+}
+```
+
+:::
diff --git a/html-a-css/responzivni-design/cvresponsive/layout-01/exercise.md b/html-a-css/responzivni-design/cvresponsive/layout-01/exercise.md
@@ -15,3 +15,29 @@ Rozložení stránky se mění v breakpointech:
 - 1000px
 
 HTML není potřeba nijak upravovat.
+
+:::solution
+
+```css
+@media (min-width: 640px) {
+  .kontejner {
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  .druhy,
+  .prvni {
+    width: 50%;
+  }
+}
+
+@media (min-width: 1000px) {
+  .prvni,
+  .druhy,
+  .treti {
+    width: calc(100% / 3);
+  }
+}
+```
+
+:::
diff --git a/html-a-css/responzivni-design/cvresponsive/layout-02/exercise.md b/html-a-css/responzivni-design/cvresponsive/layout-02/exercise.md
@@ -15,3 +15,32 @@ Rozložení stránky se mění v breakpointech:
 - 1000px
 
 HTML není potřeba nijak upravovat.
+
+:::solution
+
+```css
+@media (min-width: 640px) {
+  .kontejner {
+    display: flex;
+    flex-wrap: wrap;
+  }
+  .menu {
+    width: 30%;
+  }
+  .obsah {
+    width: 70%;
+  }
+}
+
+@media (min-width: 1000px) {
+  .menu,
+  .reklama {
+    width: 20%;
+  }
+  .obsah {
+    width: 60%;
+  }
+}
+```
+
+:::
diff --git a/html-a-css/responzivni-design/cvresponsive/sloupce/exercise.md b/html-a-css/responzivni-design/cvresponsive/sloupce/exercise.md
@@ -15,3 +15,18 @@ HTML není potřeba nijak upravovat.
 
 Výsledek bude vypadat takto:
 ::fig[responsive columns result]{src=assets/sloupce-result.gif}
+
+:::solution
+
+```css
+@media (min-width: 800px) {
+  .kontejner {
+    display: flex;
+  }
+  .sloupec {
+    width: calc(100 / 3);
+  }
+}
+```
+
+:::