Design a Set of Colored Boxes - Design a Set of Colored Boxes

HTML-CSS
1

Tell us what’s happening:

My code keeps failing test 5.

Your code so far

<!-- file: index.html -->
<html lang="en"> 
  <head> 
    <meta charset="utf-8">      
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>Colored Boxes</title> 
    <link rel="stylesheet" href="styles.css"> 
    </head> 
<body> 
  <h1>Colored Boxes</h1> 
  <div class="color-grid"> 
    <div class="color-box color1"></div> 
    <div class="color-box color2"></div> 
    <div class="color-box color3"></div> 
    <div class="color-box color4"></div> 
    <div class="color-box color5"></div>
     </div> 
   </body> 
</html>

/* file: styles.css */
body {
  background-color: #f4f4f4;
}

h1 {
  text-align: center;
  margin-top: 50px;
  font-size: 50px;
}

.color-grid {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4.5rem;
}

.color-box {
  width: 110px;
  height: 110px;
  border-radius: 5px;
  }

.color1 {
  background-color: #058505;
}

.color2 {
  background-color: rgb(255, 82, 250);
}

.color3 {
  background-color: yellow;
}

.color4 {
  background-color: hsl(208, 50%, 20%);
}

.color5 {
  background-color: #ff0505;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36 Edg/143.0.0.0

Challenge Information:

Design a Set of Colored Boxes - Design a Set of Colored Boxes

2

What’s test 5 and which line of code satisfies that test?

3

Hi @preciousC

Try commenting out one line of the CSS at a time.

This will allow you to pinpoint the source of the issue.

Happy coding

1 Like
4

It’s fine at my place. Are you sure your screen is wide enough to show all 5 blocks?

1 Like
5

the issue is that your color boxes still shrink when you resize the window. they want a fixed size. set min width instead and it should pass. happy coding

1 Like