Tribute Page - Failing One Test

HTML-CSS
1

I built a better tribute page for my portfolio project and it is failing the following test:

The element should responsively resize, relative to the width of its parent element, without exceeding its original size.

With this new project I have two img elements: #hero-image is centered using grid and #image is centered via width and margins and both elements resize responsively.

Is the test failing because my first img element is using grid or is it something that I am doing incorrectly?

2

Any feedback would be greatly appreciated.

3

The test is expecting the image to be set to display: block;

You can just add this, it shouldn’t affect the page and will make the test pass.

img {
  display: block;
}
1 Like
4

@lasjorg

Thanks for the feedback, I was able to get my page to pass. Targeting all IMG selectors broke my album layout so instead I targeted my first IMG element and it passed without a problem. I suspect that the test only looks at the first element of the specified type to see if it fits the criteria. I think this is the second time you have help me, so again thanks!

5

Making the images display block really shouldn’t do that. I looked at the album code and you have invalid syntax for the repeat function (on the .albums grid and .dreambig)

grid-template-columns: repeat(3) 1fr;
grid-template-columns: repeat(2) 1fr;
grid-template-columns: repeat(1) 1fr;

The syntax for repeat is:

grid-template-columns: repeat(3, 1fr);
grid-template-columns: repeat(2, 1fr);
grid-template-columns: 1fr; /* no need to use repeat */

If you correct them and then add justify-items: center; to the first .albums selector, it should be good.

1 Like
6

@lasjorg

Okay that makes sense. The reason that my layout broke was because I formatted the statements incorrectly, not because of display: block. Thanks again for the feedback and I went ahead and updated the syntax. Any feedback on the appearance/layout of the site?

Edit: Also is there anyway for me to check for these type of errors other than reading through the code?

7

You can use the down arrow on the right of the code boxes and click on “Analyze HTML or CSS or JS”.

It looks pretty good I think.

  1. I would bump up the font size for the body text, like 1.4rem.

  2. I would give the #img-div some more vertical padding (like 80px) and then give the caption a bit of margin-top (like 20px).

  3. I would prefer if the image grid was more uniform, this will take a few steps.

A). Give the .album a full width container with the black background.

B). Make the images 100% width.

C). Change the image grid to have a max-width, center it using margin auto and use a uniform grid-gap.

<div class="container-full">
  <div class="albums">
  ...content
  </div>
</div>

.container-full {
  background-color: black;
  position: relative;
}

.cover {
/*   max-width: 250px; */
  width: 100%;
}

.albums {
  background-color: black;
  display: grid;
  font-size: 0.8em;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  grid-template-areas: "aa bb cc" "dd ee ff";
  /* grid-gap: 30px 10px; */
  text-align: center;
  /* New CSS */
  max-width: 1080px;
  margin: 0 auto;
  grid-gap: 30px;
}

/* Prevent the image grid from bumping up against the edge */
@media (max-width: 1150px) {
  .albums {
    margin: 0 20px;
  }
}
8

@lasjorg

This is exactly how I wanted to setup my albums but I couldn’t figure out how to make the images fill the cell. I had tried width: 100% previously but it didn’t have the same effect for me.

I see that you set position: relative in the .container-full selector, I set position:relative in my main .container div wouldn’t .container-full have inherited position-relative? Or does that need to be set for each element?

What does setting the max-width on the albums element actually do? I am still confused about what max width does in general aside from use in media queries.

Sorry for all of the questions

9

It might have had to do with the broken grid-template-columns (the invalid repeat syntax). Not sure.

It doesn’t really have to be position relative but it isn’t a bad idea to set that on containers just in case you decide to use some absolute position on elements inside. It will not inherit from the other CSS class because it is a new class. You can use more than one class on elements so that is one way to do it.

<div class="box">Box main</div>

<div class="box box-orange">Box main and overwrite</div>

.box {
  height: 80px;
  width: 180px;
  background: lightblue;
  padding: 10px;
  margin: 10px;
}
/* For the cascade to work the order of the CSS matters 
 * As it's sort of an utility class using !important would also be OK
*/
.box-orange {
  background: orange;
}

Using max-width you can give an element width in non-relative units but still let it shrink in size. As an example, px is a non-relative unit and % a relative unit.

We use it to not cause an overflow, so the element won’t grow larger than the max-width but will shrink down as needed when the screen gets smaller.