App Academy

HTML/CSS border/title/pre-submission check!

Hi everyone!

I feel like I’m close to being finished. I’m having 2 issues that I can’t, for the life of me, figure out.

Does anyone know why my simple solid border is cutting in at the top left and bottom right corners? I’ve tried to troubleshoot this issue by:

-Switching from “border” property to “outline” in my .card (line 79), which worked well and looked good, but my box-shadow transition wouldn’t show up on it (does this not work for outline?), so I switched it back to “border”.
-Decreasing the max-width of my desert image, since the photo initially overlapped the border for some reason, but I’m not sure if this is allowed…?..though still doesn’t help the irregular border situation.

My other issue is I can’t figure out how to move the secondary text under the title. I’ve tried several different methods to no avail.

I really appreciate your help! Please let me know if, apart from these things, my code looks okay, or if there’s something else I need to check. I’m VERY new at this!

Many thanks!
Virginia

Ps: I just noticed that I entered closing tags for body and html twice. I’ve since corrected it :slight_smile: .

Hi Virginia,
It looks like you are getting super close!

I would recommend trying to do a little more troubleshooting to get to the cause of the problem.

  • Does the box-shadow transition work when you hover over the card?
  • What happens if you comment out all of the code related to the box-shadow? Do you still see the border with missing corners?

By testing these things out you might be able to determine the source of the problem.

Jesse

Thank you for your response! To answer your questions, yes, the box-shadow transition works when I hover over the card, but the missing corners remain even if I comment out the box-shadow code.

Would you be able to help me understand why I can’t get my secondary text to align with my title? I’ve tried everything I could think of and done research but nothing seems to work. Or is this not something I should worry about in terms of the scoring?

I appreciate your help so much! Thank you!!

Hi Virginia,
There are lots of different approaches you could take to line up the title and secondary text.

Looking at your code and screenshot, it looks like you have the title right where you want it, and just need to align the secondary text under it. When I am faced with situations like this, I sometimes try to group the two elements together into a single <div>, and then apply the styling at the <div> level instead of applying it to the two individual pieces separately.

Your styling applied to the title seems to be working nicely - what if you tried applying that styling to a <div> with two elements inside?

Hi! I just got my result back with one error. The question I missed was “* has one card”.

Looking through my html, I see that I entered both "div class=“card” and "article class=“card”. I removed the article class and hope that should do the trick. Doing that also fixed my border issue (if anyone else has this issue). Also replaced “.card img” with “.desert” id in css.

Am I right to assume this is the culprit for the failed question? Thanks!!

1 Like

PASSED. On to Git. :scream:

1 Like