Add Flex Superpowers to the Tweet Embed

HTML-CSS
1

Tell us what’s happening:
It is saying that I do not have .follow-btn display-property set to flex, which I have. Possibly a bug?

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 {
    display:flex;
    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://pbs.twimg.com/profile_images/378800000147359764/54dc9a5c34e912f34db8662d53d16a39_400x400.png" 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 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.181 Safari/537.36.

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

1 Like
2

That is weird. Try resetting it, finish the code and trying again.

3

already tried that once. Same problem

4

I just tried resetting and doing it again. Same error. Am I the only this has happened to?

5

That is strange. I copied your code from above and pasted it into that challenge on my account and it passed me. I wish I had better news for you @dave3.

6

Hmm. Odd. Is there anyway I can skip the challenge and still get credit for it since the code works?

7

It seems to be a problem with chrome. Because I copied and pasted the code into firefox and ran it there with no problems.

8

@dave3 That is good to know. I was using Firefox so that makes sense.

In order to get the Responsive Web Design Certificate you only need to complete the 5 projects at the end of the section. The sections and modules before the main projects are for learning and prep for the final projects.

9

So for the tribute page, do I do all the user stories? or just one of them?

10

Try with this:

header .follow-btn {
  display: flex;
  align-items: center;
  margin: 0 0 0 auto;
}

header h3,
header h4 {
  display: flex;
  align-items: center;
  margin: 0;
}
11

This must be a bug, I’m havin the same problem.

12

Has it been decided yet whether it is a bu in the code or in chrome or what? I am using chrome and today i am having the same problem,

If I understand correctly only the 5 projects must be done, therefore moving ahead. Will have to come back for it later.

13

@dave3 @mastersmedia11 I have the same problem with this challenge, but it doesn’t work in Firefox either! I’m using Firefox 60.0.2 (64-Bit) on Linux Mint.

14

I updated Firefox to version 61.0 (64-Bit, Linux Mint) today, but it still didn’t work. I forgot to mention that I can’t see the follow button (follow-btn) in Firefox. At the place, where the button should be, is simply nothing!
So I tried to solve this task in Chromium (V. 65.0.3325.181, official build) and voilà, it worked fine. I could also see the follow button.

15

Same bug here - anyone figure out a consistent fix?

16

Is it possible this is related to adblock in whichever browser you all are using? If you’re unable to see the follow button its quite likely an adblocker has removed it. Might try disabling it. I showed 2 blocked elements on the page, one being the follow button.

7 Likes
17

I’m using google chrome and when I turned off my adblock i was able to complete the lesson

6 Likes
18

This worked for me. I’m using Firefox 61 and had my AdBlock Plus enabled so I disabled it for the site and voila! the tests passed.

2 Likes
19

Can confirm @ryub3n is correct. You’ll need to disable your adblocker (unlock origin in my case) to complete this task.

3 Likes
20

Confirmed. It was adblock for myself as well.

2 Likes