CSS Flexbox lesson glitched?

HTML-CSS
1

The ‘Add Flex Superpowers to Tweet Embed’ lesson in the CSS Flexbox lessons in broken. It will pass everything except for the .follow-btn having a display of flex.

The button won’t even show up on the example. I’ve tried everything to get it to accept that this btn has a display of flex. Is there a way to pass this lesson? Will it be fixed?

2

Hi and welcome to the forum!

Please share your code so we can help debug and troubleshoot.

5

Here is the CSS. Very simple lesson but it isn’t registering that .follow-btn has a display of flex.

  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;
  }
6

I’m not much of a CSS expert, but this should give those on the forum who are something to work with. Thanks!

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.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

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

7

Hi @Auti49!

Welcome to the forum!

The code you have shared works on my end. Please ensure that you have disabled any extensions that interface with the freeCodeCamp website (such as Dark Mode and Ad Blocker), and set your browser zoom level to 100%. Both of these factors can cause tests to fail erroneously.

Also, check to see if your browser needs updating.

1 Like
8

I guess it was my AdBlocker. Thank you!

2 Likes
9

how do I delete this post ?

10

We do not typically delete posts with replies, as they contain information that may help others.

11

well can I delete my profile on this forum? I don’t like that it uses my name.

12

if you can’t delete the post then I’d like to delete my profile for this forum or change my profile name. There isn’t an option anywhere to change it.

13

I can change your username if you tell me what you would like it to be.

14

Yes please. Can you just make it Auti49 if its available

1 Like
15

All set

16

thank you very much for that

1 Like