Decrease Opacity does not work

HTML-CSS
1

Tell us what’s happening:
Ive been trying for 2 bloody days to get this opacity code to work. I’ve written it EXACTLY as instructed and watched the video a dozen times and copied it. It even shows its working in the visual side bar but when I click test it says its wrong. WHY is this not working???

Instructions: Set the Opacity of the anchor tags to 0.7 using Links class to select them.

Your code so far


<style>
h4 {
  text-align: center;
  background-color: rgba(45, 45, 45, 0.1);
  padding: 10px;
  font-size: 27px;
}
p {
  text-align: justify;
}
.links {
  text-align: left;
  color: black;
  opacity: 0.7;
}
#thumbnail {
  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}
.fullCard {
  width: 245px;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin: 10px 5px;
  padding: 4px;
}
.cardContent {
  padding: 10px;
}
.cardText {
  margin-bottom: 30px;
}
</style>
<div class="fullCard" id="thumbnail">
<div class="cardContent">
  <div class="cardText">
    <h4>Alphabet</h4>
    <hr>
    <p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
  </div>
  <div class="cardLinks">
    <a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
    <a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
  </div>
</div>
</div>

Your browser information:

User Agent is: Mozilla/5.0 (iPad; CPU OS 12_4_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/12.1.2 Mobile/15E148 Safari/604.1.

Challenge: Decrease the Opacity of an Element

Link to the challenge:
https://www.freecodecamp.org/learn/responsive-web-design/applied-visual-design/decrease-the-opacity-of-an-element

2

Welcome, engler.

I have tested your code in my browser, and it passes the tests. Therefore, it is likely one of the following issues for you:

  1. Your browser/version is not entirely compatible for this challenge (it happens). Solution: Do the lesson in a different browser.
  2. You have a browser extension which is blocking the tests from being run properly. Test: Look in your development console (Ctrl+Shift+i (for Chrome)), find an error. Solution: disable extension for the tests.

Hope this helps.

3

Thank you Sky for the quick reply. Ive tried 2 browsers so far (Safari and DuckDuckGo) so I’ll move over to chrome now I guess. Strange how this is the only test that it’s happened with and I even skipped it and it hasn’t happened in any subsequent tests so far.

4

So I’ve now tried Chrome, DuckDuckGo, and Safari and it still will not let me through :-1:

5

I’ve now tried 5 different browsers and it is still showing the test as failing. Is there not someone who can go in and address this, or at least give me the check so I can actually pass this module?

6

Did you check the browser console for errors?

It also might be that your browser is not updated.

7

Ive tried 5 completely separate browsers on two devices, same thing occurs.

8

I am sorry to hear it’s not working for you and I understand how frustrating it is when something you think should work just refuses to work but on the bright side your solution passes the tests for me which means it is correct.

  1. You can try resetting the challenge and manually typing the solution, no copy paste just plain old typing.
  2. You can just skip this challenge and move on. I understand it’s not ideal but you already learned the concept and I can confirm your code is correct.
9

Thanks Hugo,
I’ve tried resetting all code a dozen times or more, manual, copy/paste, 5 browsers (chrome,Firefox,safari,DuckDuckGo, and Edge) and now 3 devices. I did skip it and ended up completely the module but this test is haunting me and I am now determined to figure out why this is happening and get my checkmark.

10

I know this is going to sound bizarre, but if you really want get this out of the way and checkmarked. Have you tried doing this on a mobile device (tablet would be better). It isn’t ideal at all, but at that rate, you have nothing to lose right? :woman_shrugging:

If you do this, let’s us know how that goes.

Hope this will help?

11

I JUST got it to work! I started with using an iPad originally, then iPhone then Samsung, and finally I used my wife’s laptop in chrome and it pushed through. What a mess 🤦🏽

2 Likes
12

I am so glad to hear that it is now solved. But, this is a concern that you have to go through this process! :open_mouth:

Hmm I would suggest to compare the settings, and extensions between your Chrome and your wife’s just in case you have something that is interfering and blocking you to pass the test. It sounds crazy but few members on here have been experiencing the same problems as yourself and was down to something such as the ad blocker.

Again, I am happy and relieved that it can no longer haunt you :slightly_smiling_face: