HELP! Need assistance with my container elements

HTML-CSS
1

I am trying to make my .projects-grid class fit on screen but some of the elements in the grid are expanding off the screen. Does anyone know how to solve this problem?

.projects-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: auto-fit;
  grid-gap: 4em;
  align-items: auto
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  margin-bottom: 6rem;
}

@media (max-width: 30.625em) {
  .projects-section {
    padding: 6rem 1rem;
  }
  • this is the css for the .projects-grid class.

https://codepen.io/Skarwani/pen/vYxpNyg

  • This is the link to my codepen
2

The problem is with your images. If you don’t specify the size of an image it will use the actual size of the image (compare the size of the Survey Form image with how it is displayed on your page).

To have the image fill the entire width of the parent element, you can simply set width: 100%.

1 Like
3

Thanks for the response. So to clarify, under the class .projects-grid I should add the width to be 100%. Actually I already have if you take a look at the CSS again. In that case do I need to specify the width of the images on a separate ID/Class?

4

The width should be set for the image itself. You already assign the project-image class to all those images, so it should be as simple as:

.project-image {
  width: 100%;
}
5

I have just done that but still no result.

6

sorted it mate thanks

1 Like
7

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