Build a blog post card css issues

[BlindVisionMan]

hi. doing the lab build a blog post card and now got the following errors. have tried googling. and trying a few things. but it is the css which is failing. so will paste my css code and the errors. can any one help and point me out how to fix the errors for it to pass.
marvin.

• Failed:15. You should target .read-more and set its background-color property.

• Failed:16. You should target .read-more and set its margin property.

• Failed:17. You should target .read-more and set its display property.

• Failed:18. You should target .read-more and set its border-radius property.

• Failed:19. You should target .read-more and set its padding property.

.blog-post-card {
  background-color: white;
  border-radius: 30px;
  width: 50px;
  height: 30px;
  text-align: center;
  margin: 100px;
  background-position: center;
}

.post-img {
  background-size: cover;
  border-bottom: 2px solid blue;
  max-width: 100%;
  max-height: 100%;
}

.post-content {
  text-align: center;
  font-family: arial;
  padding: 50px;
}

.post-title {
  color: pink;
}

.post-excerpt {
  color: lightgreen;
}

.read-more:hover {
  background-color: white;
  color: skyblue;
  margin: 10px;
  padding: 10px;
  border-radius: 15px;
  display: inline-block;
}

[pkdvalis]

If you have a question about a specific challenge as it relates to your written code for that challenge and need some help, click the Get Help > Ask for Help button located on the challenge.

The Ask for Help button will create a new topic with all code you have written and include a link to the challenge also. You will still be able to ask any questions in the post before submitting it to the forum.

Thank you.

[BlindVisionMan]

Hi. I did use the help button on the challenge. So patiently waiting for help. Marvin😎

[ILM]

you did not, there would be a post with the regular template

we need

• your full code
• and a link to the challenge

to be able to help

[BlindVisionMan]

hi heres the link to the challenge and my css code.
can you help.
marvin.
ps: pasting.

freeCodeCamp.org

.blog-post-card {
background-color: white;
border-radius: 30px;
width: 50px;
height: 30px;
text-align: center;
margin: 100px;
background-position: center;
}

.post-img {
background-size: cover;
border-bottom: 2px solid blue;
max-width: 100%;
max-height: 100%;
}

.post-content {
text-align: center;
font-family: arial;
padding: 50px;
}

.post-title {
color: pink;
}

.post-excerpt {
color: lightgreen;
}

.read-more:hover {
background-color: white;
color: skyblue;
margin: 10px;
padding: 10px;
border-radius: 15px;
display: inline-block;
}

[JeremyLT]

Which part of your code do you think satisfies those test cases?

[BlindVisionMan]

hi, well heres the errors. thought i have the correct parts in the style sheet. if not, then how to fix?
will paste the errors from the tests below. first time doing this and using the jaws for windows screenreader and totally blind.
marvin.
ps: pasting below.

• Failed:15. You should target .read-more and set its background-color property.

• Failed:16. You should target .read-more and set its margin property.

• Failed:17. You should target .read-more and set its display property.

• Failed:18. You should target .read-more and set its border-radius property.

• Failed:19. You should target .read-more and set its padding property..

[BlindVisionMan]

hi. probably none. so how to fix? what am i missing?
please advice to get this to pass?

[JeremyLT]

@BlindVisionMan

thought i have the correct parts in the style sheet

What part of your CSS do you think meets these requirements. Please answer this question.

You already posted the errors. I have read them. I am trying to see what you part of your code you wrote to try to address those errors.

If you have not tried to write code that meets those requirements, you should do so.

[BlindVisionMan]

hi, i did try to write the code in my css. okay, will go and then try again or look at some other examples, to try to fix.
did try my best.
marvin.

[JeremyLT]

Which code do you have that you wrote to satisfy these tests? Please post or quote just that code.

[BlindVisionMan]

hi, none. so will go and then try to fix and then satisfy. will do this on my own.
thanks.

[JeremyLT]

It is definitely best to try to solve the failing tests yourself first.

[BlindVisionMan]

hi. so heres my read-more block. now not liking the hover. not liking my background color or margin. so how to fix? what stupid thing am i doing. how to get this to work. trying to look through my examples how i did this. please be gentle and help me out. so why is it doing this? using visual studio code. so should i then copy and paste from the editor to my visaul code files, then copy and paste back to the editor. or is it something else. as totally blind and what colours and other visual effects it is requiring. please advice. trying my best.
marvin.
ps: pasting below.
my code block.

.read-more:hover {
      bakcground-color: blue;
      margin: 100px;
  color: skyblue;
  border-radius: 15px;
  display: inline-block;
}

[JeremyLT]

Why did you add hover to the selector?

[BlindVisionMan]

hi fixed my hover. so now only the background color and other things. so what else to try? have looked or looking through. so what am i doing wrong?trying my best to figure it out and far as i know have the correct code. unless wrong. trying my best. unless the editor is having a fit, maybe a bug with vallidation. or is it just me. please be gentle. so how to fix this and get this to work.
marvin.

[JeremyLT]

If you updated your code, please post the new code.

[BlindVisionMan]

hi. heres my updated code. unless i have to do the ratial-gradient for the border radius. and not sure why it is not liking my other values. please help. pasting below. so what am i doing wrong. maybe take one error at a time, and then try to fix. marvin.
ps: pasting below.
real trying hard and then not still working.
what stupid thing am i doing wrong? or just dumb, stupid, not able to see as blind and relying on a screen reader. using google chrome and also windows 11 pro.

.blog-post-card {
  background-color: white;
  border-radius: 30px;
  width: 50px;
  height: 30px;
  text-align: center;
  margin: 100px;
  background-position: center;
}

.post-img {
  background-size: cover;
  border-bottom: 2px solid blue;
  max-width: 100%;
  max-height: 100%;
}

.post-content {
  text-align: center;
  font-family: arial;
  padding: 50px;
}

.post-title {
  color: pink;
}

.post-excerpt {
  color: lightgreen;
}

.read-more:hover {
  background-color: red;    
      margin: 100px;
      padding: 50px;
  color: skyblue;
  border-radius: 15px;
  display: inline-block;
}

[JeremyLT]

Why do you have hover in your CSS selector?

[BlindVisionMan]

hi, because that is one of the requirements in the lab. if i dont put that in, gives an error. okay will then just go and select all the errors and tests and then paste below.

• Passed:1. You should have a div with a class of blog-post-card.

• Passed:2. You should have an img element with a class of post-img. Make sure your image has an alt attribute with text and a src attribute with a value.

• Passed:3. You should have a div with class of post-content.

• Passed:4. You should have an h2 element with a class of post-title. Make sure it has some text content for the title of your blog post.

• Passed:5. You should have a p with a class of post-excerpt. Make sure it has some text content to summarize your blog post.

• Passed:6. You should have an a element with a class of read-more.

• Passed:7. Your .read-more element should have the text Read More.

• Passed:8. Your .blog-post-card element should have a border-radius property with a value (should not be 0 or a negative value).

• Passed:9. Your .blog-post-card element should have a white background.

• Passed:10. You should target .blog-post-card and set its width property.

• Passed:11. You should target .blog-post-card and set its text-align property.

• Passed:12. You should target .post-content and set its padding property.

• Passed:13. Your .read-more element should have a hover effect.

• Passed:14. You should target .read-more and set its color property.

• Failed:15. You should target .read-more and set its background-color property.

• Failed:16. You should target .read-more and set its margin property.

• Failed:17. You should target .read-more and set its display property.

• Failed:18. You should target .read-more and set its border-radius property.

• Failed:19. You should target .read-more and set its padding property.

• Passed:20. Your .post-img element should fill the card’s width.

• Passed:21. Your .post-img element should have a border-bottom value.

• Passed:22. Your .post-title and .post-excerpt elements should have margins and non-default text colors.