Freecodecamp: [beta] Unable to give any visual feedback in these anchor tags with text-align property

[nativedone]

Challenge create-visual-balance-using-the-textalign-property has an issue.
User Agent is: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.87 Safari/537.36.
Please describe how to reproduce this issue, and include links to screenshots if possible.

I think that there is one more thing missed in that challenge. The final note says:

When you align the two anchor tags, you will see no difference. This is because text is aligned to the left by default.

But, to be honest you are unable to see any change, even if you use text-align with other values as center, right, start, end...

So, I think that portion of the challenge needs to be changed. If we are unable to give any visual feedback in these anchor tags they need to be changed.

<style>
  h4 {
    text-align: center;

  }
  p {
    text-align: justify;

  }
  .links {
    margin-right: 20px;
    text-align: left;   

  }
  .fullCard {
    border: 1px solid #ccc;
    border-radius: 5px;
    margin: 10px 5px;
    padding: 4px;
  }
  .cardContent {
    padding: 10px;
  }
</style>
<div class="fullCard">
  <div class="cardContent">
    <div class="cardText">
      <h4>Google</h4>
      <p>Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.</p>
    </div>
    <div class="cardLinks">
      <a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a>
      <a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
    </div>
  </div>
</div>

[systimotic]

Source: https://github.com/freeCodeCamp/freeCodeCamp/issues/13611#issuecomment-284264331
Thanks for reporting @adetime!
I agree, it is weird that we're setting text-align if you can't see the result anyway. I think we should remove it from the links completely.

[nativedone]

I agree @systimotic. Removing it solves the issue.

[vinayarkasali]

Hi Adeildo,

i have done solution for that, hope your looking like this kind of solution...

http://beta.freecodecamp.com/en/challenges/applied-visual-design/create-visual-balance-using-the-textalign-property

[vinayarkasali]

[vinayarkasali]

[nativedone]

Hi Vinay,

Thanks for sharing your solution.

Yeah! I think your solution moves the anchor tag to left, and is also able to move to right.

However, the goal of this particular challenge is teaches about text-align property.

The float property is another level of knowledge and that takes the HTML element out of the normal flow of a document, as explained in the next section of Applied Visual Design.

[nativedone]

I will submit a PR to address this issue.