Learn CSS Flexbox by Building a Photo Gallery - Step 8

HTML-CSS
1

Tell us what’s happening:

Describe your issue in detail here.

Your code so far

HOW SHOULD I ADD THE BOX-SIZING TO THE CONTENT SIZING IN CSS

<!-- file: index.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">
      <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">
    </div>
  </body>
</html>

/* file: styles.css */

/* User Editable Region */

content-sizing {
box-sizing
}

/* User Editable Region */


.gallery {
  border: 5px solid red;
  width: 50%;
}

img {
  width: 100%;
  border: 5px solid blue;
  padding: 5px;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36 OPR/95.0.0.0

Challenge Information:

Learn CSS Flexbox by Building a Photo Gallery - Step 8

2

You appear to have created this post without editing the template. Please edit your post to Tell us what’s happening in your own words.
Learning to describe problems is hard, but it is an important part of learning how to code.
Also, the more you say, the more we can help!

3 
* {
  box-sizing: border-box;
}

To adjust the box-sizing property in CSS to apply to all elements including the content, padding, and border, you’d generally set it to border-box .

4

Hello @Xcrimson !

To enter the box-sizing is the same as if entering other property and value only we are using a univeral selector.

  • is the selector, box-sizing is the property and content-box is the value.
Example using a body selector.

body {
border: solid;
}

The * univeral selector would be in place of the body, and the property and value would be the ones from the instructions.

I hope this helps you move on in your coding journey.

Keep up the good progress and happy coding @Xcrimson
5

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.