Hi all, Problem with image taking up whole space in grid area

Code Feedback
1

///.productcontainer{
min-height: 300px;
width: 100%;
background: white;
display: grid;
grid-template-columns: 1fr 2fr;
grid-template-rows: 1fr;
grid-gap: 10px;
grid-template-areas: “img1 header”;

}
.essential{
grid-area: img1;
max-width: 50px;

}
.kitdetail{
grid-area: header;
font-size: 12px;
}

  <div class="kitdetail"
       <p> This kit is essential for family care.</p>
</div>
</section>-->///
2

Hi Helen. Being new here myself you should take my suggestions with a grain of salt, but I believe it is necessary to place your image within its own div and resize the image there. I would suggest creating nested grids for your text and image like this:

1 Like
3

Thank you so much. I made a couple of changes, but you helped a lot. This is how I wanted it to look. I plan on making more changes.

4