Css Selectors and Visual rules, font-weight bold problem


#1

https://www.codecademy.com/courses/learn-css-selectors-visual-rules/lessons/css-visual-rules/exercises/font-weight-i?action=lesson_resume&course_redirect=learn-css

The exercise is to set the font-weight of the paragraph element to bold.

Did you set the ‘p’ selector around line 32 to have a font weight of bold?

I have used 3 different browsers and tried refreshing on all of them.



body {
  /* Old browsers */
  background: #141E30;
  /* Chrome 10-25, Safari 5.1-6 */
  background: -webkit-linear-gradient(-45deg, #35577D, #141E30);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  background: linear-gradient(-45deg, #35577D, #141E30);
  margin: 0;
  padding: 0;
}

h1 {
  color: #FFF;
  font-size: 2em;
  padding-top: 100px;
  width: 100%;
  font-family: Georgia;
}

h2 {
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  color: rgba(255, 255, 255, 0.5);
  font-weight: 100;
  font-size: 22px;
  line-height: 24px;
  padding-bottom: 30px;
  text-align: left;
  width: 70%;
  font-family: Georgia;
}
p {
  color: AliceBlue;
  line-height: 1.3em;
  text-align: left;
  width: 100%;
  font-family: Helvetica;
  font-size: 18px;
  font-weight: bold;
}
  
.byline {
  font-family: Helvetica;
  color: rgba(255, 255, 255, 0.5);
  float: left;
  font-size: 14px;
  padding-left: 10px;
  text-transform: uppercase;
}

.caption {
  display: block;
  font-family: 'Playfair Display', serif;
  font-size: 14px;
  font-style: italic;
  line-height: 14px;
  margin-left: 20px;
  padding: 10px;
  position: relative;
  top: 80%;
  width: 60%;
}

.content {
  padding: 40px;
}

.image {
  background-image: url("https://s3.amazonaws.com/codecademy-content/courses/web-101/unit-4/htmlcss1-img_soccer.jpeg");
  background-size: cover;
  background-position: center;
  height: 300px;
}

.writer-img {
  -webkit-box-shadow: 5px 0px 5px 0px rgba(0, 0, 50, 0.97);
  -moz-box-shadow: 5px 0px 5px 0px rgba(0, 0, 50, 0.97);
  box-shadow: 5px 0px 5px 0px rgba(0, 0, 50, 0.97);
  float: left;
  width: 50px;
}



#2

I’m facing the exact same problem, on two different browsers. I’m mentioning what I tried to do to get around the problem (all of which failed to work), to forestall any suggestions that don’t work.

I was on Firefox 56.0.2 (64-bit) when I first encountered this problem. These are what I did, in order:

  1. Inserting “font-weight: bold;” (without quotes on other lines (on the line above color, for example) within the ‘p’ selector block.

  2. Resetting the workspace and redoing the whole thing.

  3. Going back to 1/10 of the exercise and repeating (2).

  4. Restarting Firefox on safe mode and repeating (3).

  5. Switching to a different browser (Chrome 62.0.3202.75 32-bit, no extensions) on an entirely different device and repeating (3).

I also searched this forum but all previous mentions of the same issue were resolved by switching browsers to Chrome (but not IE or Edge), for some reason. This solution no longer works now, though.


#3

Hi @kingsrook,

Judging the error you posted:

Have you tried putting font-weight: bold; at line 32?

Try delete the font-weight: bold; after the font-size: 18px;
and insert it before color: AliceBlue; ?

See if this works? :thinking:


Note: just my observation, I have not started on the new CSS track yet.


#4

Yeah I tried that too lol, i’ve tried everything I can think of, the only thing I can figure is that the exercise is messed up.


#6

also, when i run the code, it does change it to bold, so i mean the code is working, its just not being accepted.


#7

I’ve just reset the entire CSS course before redoing the whole thing. Still got stuck at the exact same spot.

This should have been a simple piece of homework, really. Just append “font-weight: bold;” without quotes at the end of the ‘p’ selector block, before the closing curly braces, like so:

p {
  color: AliceBlue;
  line-height: 1.3em;
  text-align: left;
  width: 100%;
  font-family: Helvetica;
  font-size: 18px;
  font-weight: bold;
}

The ‘preview’ webpage even displays the change properly, as the whole paragraph starting from “When the first World Cup arrived in the US in the 90’s everyone…” is bolded as it should be, but Codecademy still throws up the same error and refuses to let me progress.

What on earth could be the problem here? Was something programmed wrong at the backend (or more likely, the javascript), and if so, can anyone look at it and figure out some way to bypass the issue?

Seriously, this has been a persistent problem judging by past threads, but at least back then changing over to Chrome somehow got things to work. Now even Chrome refuses to budge. Mucking around with the lines to put “font-weight:bold” on line 32 doesn’t work either.

And nobody ever responds to the bug ticket. I am getting extremely frustrated with this issue here.


#8

having the same issue as i try to get through the exercise, ultimately i ended up just hitting run until the exercise prompted me “Get code”. it entered the “font-weight: bold;” line underneath “font-size: 18px” the same way i have nearly 20 times and proceeded to check that step in the instructions. i’m fine with that for now since i know that i was correct in the first place.


#9

Second this issue… Finally used to Get Code Button to move fwd as well. Like others, the paragraphs were bold.


#10

I have exactly the same problem.


I tried at least three browser, reset my code. Inserted font-weight: bold; in different places of the selector to P. it’s not helping. Anyone able to solve this problem?


#11

I am also having this exact same problem. It must be a bug in the lesson. Even when I hit Get Code and run it, it gives the same message. The answer key doesn’t even register as correct!


#13

Still ongoing with no solution.


#14

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