question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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>

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Reactions:1
  • Comments:7 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
nativedonecommented, Mar 8, 2017

I will submit a PR to address this issue.

1reaction
nativedonecommented, Mar 7, 2017

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

[beta] possibly a change in instruction is needed for challenge
The challenge works fine, its just that the instructions are a bit unclear, the challenge requires the value "justify" but this is a...
Read more >
Correct this CSS code - CodeProject
Look in your CSS and find the h2 element descriptor, then look in its properties and you'll you didn't set the value to...
Read more >
text-align - CSS: Cascading Style Sheets - MDN Web Docs
The text-align CSS property sets the horizontal alignment of the inline-level content inside a block element or table-cell box.
Read more >
CSS Text Module Level 3 - W3C
Abstract. This CSS module defines properties for text manipulation and specifies their processing model. It covers line breaking, ...
Read more >
Why can't I text-align property to a hyperlink? - Codecademy
In this exercise, the link is inside the div, but my text is only centered if I use the text-align property in the...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found