ContextQMD
Back to Freecodecamp

Step 7

curriculum/challenges/english/blocks/learn-css-flexbox-by-building-a-photo-gallery/64dd076a1b33c86d84b4232f.md

latest3.3 KB
Original Source

--description--

In order to better visualize how your elements are sized, adding a border can be helpful.

Give your .gallery element a width of 50% and a border set to 5px solid red.

Then give your img elements a width of 100%, padding set to 5px, and a border set to 5px solid blue.

--hints--

You should have a .gallery selector.

js
assert.exists(new __helpers.CSSHelp(document).getStyle('.gallery'));

Your .gallery selector should have a width property.

js
assert.exists(new __helpers.CSSHelp(document).getStyle('.gallery')?.width);

Your .gallery selector should have a width property set to 50%.

js
assert.equal(new __helpers.CSSHelp(document).getStyle('.gallery')?.width, '50%');

Your .gallery selector should have a border property.

js
assert.exists(new __helpers.CSSHelp(document).getStyle('.gallery')?.border);

Your .gallery selector should have a border property set to 5px solid red.

js
assert.equal(new __helpers.CSSHelp(document).getStyle('.gallery')?.border, '5px solid red');

You should have an img selector.

js
assert.exists(new __helpers.CSSHelp(document).getStyle('img'));

Your img selector should have a width property.

js
assert.exists(new __helpers.CSSHelp(document).getStyle('img')?.width);

Your img selector should have a width property set to 100%.

js
assert.equal(new __helpers.CSSHelp(document).getStyle('img')?.width, '100%');

Your img selector should have a padding property.

js
assert.exists(new __helpers.CSSHelp(document).getStyle('img')?.padding);

Your img selector should have a padding property set to 5px.

js
assert.equal(new __helpers.CSSHelp(document).getStyle('img')?.padding, '5px');

Your img selector should have a border property.

js
assert.exists(new __helpers.CSSHelp(document).getStyle('img')?.border);

Your img selector should have a border property set to 5px solid blue.

js
assert.equal(new __helpers.CSSHelp(document).getStyle('img')?.border, '5px solid blue');

--seed--

--seed-contents--

html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Photo Gallery</title>
    <link rel="stylesheet" href="./styles.css">
  </head>
  <body>
    <header class="header">
      <h1>css flexbox photo gallery</h1>
    </header>
    <div class="gallery">
      
      
      
      
      
      
      
      
      
    </div>
  </body>
</html>
css
--fcc-editable-region--

--fcc-editable-region--