Product Landing Page Project - Help with Grid Column Background Color?

Code Feedback
1

Hello all,

I am on the third project - making a Product Landing Page.

I am trying to make some grid columns, but for some reason, the first column refuses to take on any background color I assign it, but instead defaults to having no color. The other two columns always take on whatever color I give them. I have reviewed the code over and over and tried to review the old lessons, and I cannot figure out what is going on.

I did eventually decide to style the element again, and this time it did end up taking on a color.

Here is the relevant code (apologies if this is not the proper way to post code to the forum – I googled this as well and did not find an answer):

.d1{background:LightSalmon;}
.d2{background:PaleTurquoise;}
.d3{background:LightSalmon;}

.container2 {
font-size: 40px;
min-height: 300px;
width: 100%;
background: LightGray;
display: grid;
grid-template-columns: auto auto auto;
grid-template-rows: auto auto auto;
}

.d1 {
/* I had to style this element twice, (see above) because it kept defaulting to having no background color */
background: Blue;
}

As you can see, I had to style .d1 twice, as that was the only way to make it take on a color. I would appreciate any guidance on how to fix this problem.

My codepen:
https://codepen.io/piercewillans/pen/dypVOaG

Thanks!

2

I’ve had a look at it, something in your CSS must be overriding the background color of your .d1

Editing my comment because I just double-checked it. You’ve got an extra bracket here:

@keyframes fling-minislide #quote-slideshow {25%{opacity:1;} 40%{opacity:0;}}
.fling-minislide blockquote:nth-child(4){animation-delay:0s;}
.fling-minislide blockquote:nth-child(3){animation-delay:5s;}
.fling-minislide blockquote:nth-child(2){animation-delay:10s;}
.fling-minislide blockquote:nth-child(1){animation-delay:15s;}
  
}  /* <-- Extra bracket */

Had me scratching my head there for a bit too!

3

Wow, such a simple thing can make a big difference.

You’ve been a great help! Thank you!

1 Like
4

No problem! Helps to have a second set of eyes sometimes.

5

I would really suggest not using that one-line formatting for the CSS. Even for simple rules. It just makes adding more properties to the selectors difficult and error-prone.

Codepen has a built-in formatter you can use (each code box has a down chevron with a menu that has a format option).