gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix: photo-gallery

Browse Source
This commit is contained in:
Shaun Hamilton
2021-12-01 20:14:02 +00:00
parent 102184adc2
commit 87ab1775c3
2 changed files with 82 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
curriculum/challenges/english/01-responsive-web-design/learn-css-flexbox-by-building-a-photo-gallery/step-016.md
View File

@ -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`. Your `#gallery` selector should have a `padding` property set to `0 4px`.
```js ```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-- # --seed--

78
curriculum/challenges/english/01-responsive-web-design/learn-css-flexbox-by-building-a-photo-gallery/step-021.md
View File

@ -125,3 +125,81 @@ body {
--fcc-editable-region-- --fcc-editable-region--
``` ```
# --solutions--
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Flexbox Photo Gallery</title>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<div class="header">
<h1>CSS FLEXBOX PHOTO GALLERY</h1>
</div>
<div id="gallery">
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg"/>
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg"/>
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg"/>
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg"/>
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg"/>
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg"/>
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg"/>
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg"/>
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg"/>
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/10.jpg"/>
</div>
</body>
</html>
```
```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%;
}
}
```