From 87ab1775c338309b128df1a2cb21aa0357318df4 Mon Sep 17 00:00:00 2001 From: Shaun Hamilton Date: Wed, 1 Dec 2021 20:14:02 +0000 Subject: [PATCH] fix: photo-gallery --- .../step-016.md | 5 +- .../step-021.md | 78 +++++++++++++++++++ 2 files changed, 82 insertions(+), 1 deletion(-) diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-flexbox-by-building-a-photo-gallery/step-016.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-flexbox-by-building-a-photo-gallery/step-016.md index 3127787491..da55d169e4 100644 --- a/curriculum/challenges/english/01-responsive-web-design/learn-css-flexbox-by-building-a-photo-gallery/step-016.md +++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-flexbox-by-building-a-photo-gallery/step-016.md @@ -14,7 +14,10 @@ Give your `#gallery` selector a `padding` property set to `0 4px`. Your `#gallery` selector should have a `padding` property set to `0 4px`. ```js -assert(new __helpers.CSSHelp(document).getStyle('#gallery')?.padding === '0px 4px'); +assert.equal(new __helpers.CSSHelp(document).getStyle('#gallery')?.paddingTop, '0px'); +assert.equal(new __helpers.CSSHelp(document).getStyle('#gallery')?.paddingBottom, '0px'); +assert.equal(new __helpers.CSSHelp(document).getStyle('#gallery')?.paddingLeft, '4px'); +assert.equal(new __helpers.CSSHelp(document).getStyle('#gallery')?.paddingRight, '4px'); ``` # --seed-- diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-flexbox-by-building-a-photo-gallery/step-021.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-flexbox-by-building-a-photo-gallery/step-021.md index 044158a50d..8bd1c7f255 100644 --- a/curriculum/challenges/english/01-responsive-web-design/learn-css-flexbox-by-building-a-photo-gallery/step-021.md +++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-flexbox-by-building-a-photo-gallery/step-021.md @@ -125,3 +125,81 @@ body { --fcc-editable-region-- ``` + +# --solutions-- + +```html + + + + + + CSS Flexbox Photo Gallery + + + +
+

CSS FLEXBOX PHOTO GALLERY

+
+ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + margin: 0; + font-family: Arial; + background: #EBE7E7; +} + +.header { + text-align: center; + padding: 32px; + background: #E0DDDD; +} + +#gallery { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +#gallery img { + width: 25%; + height: 300px; + object-fit: cover; + margin-top: 8px; + padding: 0 4px; + border-radius: 10px; +} + +@media (max-width: 800px) { + #gallery img { + width: 50%; + } +} + +@media (max-width: 600px) { + #gallery img { + width: 100%; + } +} +```