Add Flex Superpowers challenge

HTML-CSS
1

Hi keep getting the following error, even though I have entered the correct code. Any advice please? // running tests Your

.follow-btn```

should have a

display```

property set to flex. // tests completed

Your code so far


<style>
body {
  font-family: Arial, sans-serif;
}
header {
  display: flex;
}
header .profile-thumbnail {
  width: 50px;
  height: 50px;
  border-radius: 4px;
}
header .profile-name {
  display: flex;
  margin-left: 10px;
}
header .follow-btn {
display: flex;
 margin: 0 0 0 auto;
}
header .follow-btn button {
  border: 0;
  border-radius: 3px;
  padding: 5px;
}
header h3, header h4 {
  display: flex;
  margin: 0;
}
#inner p {
  margin-bottom: 10px;
  font-size: 20px;
}
#inner hr {
  margin: 20px 0;
  border-style: solid;
  opacity: 0.1;
}
footer {
  display: flex;
}
footer .stats {
  display: flex;
  font-size: 15px;
}
footer .stats strong {
  font-size: 18px;
}
footer .stats .likes {
  margin-left: 10px;
}
footer .cta {
  margin-left: auto;
}
footer .cta button {
  border: 0;
  background: transparent;
}
</style>
<header>
<img src="https://freecodecamp.s3.amazonaws.com/quincy-twitter-photo.jpg" alt="Quincy Larson's profile picture" class="profile-thumbnail">
<div class="profile-name">
  <h3>Quincy Larson</h3>
  <h4>@ossia</h4>
</div>
<div class="follow-btn">
  <button>Follow</button>
</div>
</header>
<div id="inner">
<p>I meet so many people who are in search of that one trick that will help them work smart. Even if you work smart, you still have to work hard.</p>
<span class="date">1:32 PM - 12 Jan 2018</span>
<hr>
</div>
<footer>
<div class="stats">
  <div class="Retweets">
    <strong>107</strong> Retweets
  </div>
  <div class="likes">
    <strong>431</strong> Likes
  </div>
</div>
<div class="cta">
  <button class="share-btn">Share</button>
  <button class="retweet-btn">Retweet</button>
  <button class="like-btn">Like</button>
</div>
</footer>

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.108 Safari/537.36.

Challenge: Add Flex Superpowers to the Tweet Embed

Link to the challenge:
https://www.freecodecamp.org/learn/responsive-web-design/css-flexbox/add-flex-superpowers-to-the-tweet-embed

2

Welcome, cybernerd.

When I copy-paste your code in the lesson, the tests pass. I can only suggest resetting the code, and trying again.

If that does not work, debug the issue in the developer console (Ctrl+Shift+i), see what errors are logged in the console, when you hit “Run the Tests”.

Hope this helps.

1 Like
3

Hello, @cybernerd and welcome to the forum community :slight_smile:

So, in your case it is rather odd because your code is correct and it has passed the test as well.

Have you tried doing this in a different browser?

4

Hi Madalene, thank you for your response and yes it seems odd, I only tried in chrome as of yet, and will try in another browser. :slight_smile:

1 Like
5

Hi Sky020, thanks for your response, I tried resetting a few times, but no success, I will try debugging in developer console, cheers :slight_smile:

6

Hi @cybernerd, you might be having the same problem that is discussed in this thread. Do you have uBlock Origin installed? Try shutting it off and then running the test. If that doesn’t work, you should test any other extensions you have enabled to see if they are causing a conflict and report it to this issue.

7

Hi Madalena and Sky020, it’s error free when run in Safari, so maybe an issue with Chrome. Many thanks for your advice.

1 Like
8

I am happy to hear that you have managed to pass the test, however it is rather odd that this has happened. I have passed with no problem earlier and that was in Chrome.

Maybe you should check out the links in @fram’s post above to see if this could be fixed for future reference.

Again, welcome and hope to see you more in the community. :slight_smile:

9

Hi @fram, madalena and sky020 I checked out it out and AdBlock was the culprit in Chrome, now disabled on freecodecamp.org, all is well…many thanks :slight_smile:

1 Like
10

Hi @Sky0202, yes the debug worked as it gave the errors related to Adblock, thanks.

1 Like