Learn Responsive Web Design by Building personal portofolio

Hello
The image still very large and I dont know why

Your code so far

/* file: index.html */

   <section id="work">
            <h2>These are some of my projects</h2>
            <div id="projects-grid">
            <a href="https://codepen.io/freeCodeCamp/full/zNqgVx" class="project-link " target="_blank"><img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/tribute.jpg" alt="project" class="project-img"><p>
               <span><code><</code></span>  Tribute Page <span><code></code>/></span>
                </p></a>
            
            <a href="https://codepen.io/freeCodeCamp/full/qRZeGZ" class="project-link" target="_blank"><img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png" alt="project" class="project-img"> <p>
                <span><code><</code></span> Random Quote Machine <span><code>/></code></span>
                </p></a>
           
            <a href="https://codepen.io/freeCodeCamp/full/wgGVVX" class="project-link" target="_blank"><img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/calc.png" alt="project" class="project-img"><p>
               <span><code><</code></span> JavaScript Calculator <span><code>/></code></span>
                </p></a>
            
            <a href="https://codepen.io/freeCodeCamp/full/mVEJag" class="project-link" target="_blank"><img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/map.jpg" alt="project" class="project-img"><p>
               <span><code><</code></span> Map Data Across the Globe <span><code>/></code></span>
                </p></a>
            
            <a href="https://codepen.io/freeCodeCamp/full/wGqEga" class="project-link" target="_blank"><img src="	https://cdn.freecodecamp.org/testable-projects-fcc/images/wiki.png" alt="project" class="project-img">  <p>
                <span><code><</code></span> Wikipedia Viewer <span><code>/></code></span>
                </p></a>
          
            <a href="https://codepen.io/freeCodeCamp/full/KzXQgy" class="project-link" target="_blank"><img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/tic-tac-toe.png" alt="project" class="project-img"> <p>
                <span><code><</code></span> Tic Tac Toe Game <span><code>/></code></span>
                </p></a>
                </div>
           
       
           <a href="https://codepen.io/FreeCodeCamp/" id="show-more-btn" target="_blank"></a>
        </section>

```css
/* file: styles.css */

#work{
    background-color: var(--main-blue);
    height: 100vh;
    padding: 6rem 2rem;
}

 h2{
    font-size: 2.5rem;
    border-bottom: solid 2px var(--main-white);
    color: var(--main-white);
    font-weight: 300;
    max-width: 640px;
    margin:0 auto 6rem auto ;
    text-align: center;
 

}

.project-link{
    background-color: var(--main-gray);
    -webkit-border-radius:2px;
    -moz-border-radius:2px;
    -o-border-radius:2px;
    border-radius:2px;
    box-shadow: 1px 1px 2px rgb(0 0 0 / 50%);
}
.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    grid-gap: 4rem;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    margin-bottom: 6rem;
}

.project-title {
    font-size: 2rem;
    padding: 2rem 0.5rem;
  }
  
  
.project-img{
    
        height: calc(100% - 6.8rem);
        width: 100%;
        object-fit: cover;
}




**Your browser information:**

User Agent is: <code>Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36</code>

**Challenge:**  Learn Responsive Web Design by Building a Piano - Step 1

**Link to the challenge:**
https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-responsive-web-design-by-building-a-piano/step-1

Which image are you referring to here?

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