Step 40 of City Skyline not applying background

HTML-CSS
1

On step 40 of the Learn CSS by developing a city skyline I must add a background property to class bb1a and apply linear gradient. My code is below, unsure of what I am doing wrong.

.bb1a {
  background: linear-gradient( 
    --building-color1,
    --window-color1
  );
  width: 70%;
  height: 10%;
  background-color: var(--building-color1);
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/101.0.4951.67 Safari/537.36

Challenge: Step 40

Link to the challenge:

2

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

1 Like
3

You have forgotten to use the var(--...) for the linear gradient colors.
You will also have to delete the background-color property

3 Likes
4

I think you forgot to use the var() function to access a couple of your CSS variables e.g. var(--your-variable)

4 Likes
5

Thank you so much, I can’t believe I missed that I tried 100000 times. Appreciate the help!

6

Thank you! Feels obvious now, I couldn’t figure that out for the life of me.

2 Likes
9

I skipped ahead to the next step to see what it wanted because i had this same issue and pasting in this solution from this reply didn’t work. I realized too late that you explained it in your comment but i didn’t get it right away because i didn’t see it reflected in the code in your reply. for others who may get just as confused as i did, here’s what the solution should actually look like:

Mod Edit: Solution removed
10

It is great that you solved the challenge, but instead of posting your full working solution, it is best to stay focused on answering the original poster’s question(s) and help guide them with hints and suggestions to solve their own issues with the challenge.

We are trying to cut back on the number of spoiler solutions found on the forum and instead focus on helping other campers with their questions and definitely not posting full working solutions.

1 Like
11

Hi there. First time poster on here so apologies if I do anything wrong. I spotted dakens error as I did a similar thing but I cannot for the life of me work out why its not accepting my code now. just says I need to add a background to class bb1a!!! and I swear I have.

.bb1a {
  width: 70%;
  height: 10%;
  background: linear-gradient(
      var(--building-color1),
      var(--window-color1)
    );

}

oh, and just to add, it seems to have done the right thing in the preview window so the code works - just doesn’t accept it.

1 Like
12

Hi @ amartin1302, and welcome to the forum!

I’ve just tried your code, and it passes for me.

You might have a browser problem - Safari seems to be causing just this kind of problem on quite a few of the challenges in the new curriculum.

So, if you’re using Safari then maybe you could try a different browser - I tested your code using Chrome.
If you’re not using Safari, then try disabling any extensions (e.g. ad blockers) or dark themes and see if that helps.

Concerning the forums, it’s much better to start a new thread for your problem rather than posting on an existing thread.

You can do that by clicking the Ask for Help button located on the challenge.
That will create a new topic with all your code and it also includes a link to the challenge.
You’ll still be able to ask your question in the post before submitting it to the forum.

13

Perfect. I don’t have any extensions, but you are right. safari seems to be the issue. works fine in Chrome. at least it wasn’t me going mad. Thanks for that!

14

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