@elaineleung
Posted
Hi Natasha, congratulations on completing your first challenge! This is a good start and good attempt at positioning elements.
I just want to start by addressing what @ChrisAndrewsDev mentioned: regarding article elements, I'm not sure whether he was referring to the <article>
tags or to the inline elements such as <p>
, <a>
, and <h2>
, but in any case, I don't really think it's a problem to use article tags here as long as there's meaningful content in them, and the only real issue could be the accessibility tests. I probably would put all the text elements inside the <article class="paragraph">
tag, and then change the one with the image to a regular <div>, like this:
<div>
<div class="image">
<img src="..." class="product-img">
</div>
<article>
<h2></h2>
<h1></h1>
<ul></ul>
<p></p>
<button></button>
</article>
</div>
The issue with the text being all squished to the side is just the lack of spacing, which can be taken care of in a few ways. Since you're using float
, a quick and "hacky" way would just be to throw a margin-right: 2rem
on the product-img
element. You might run into some extra spacing which you might be able to take care of using negative margins. While this works in the short run, it's more of a band-aid solution, and if you ask me, it's bound to create more problems than solutions. The way I'd fix this is to use flexbox and not float, and if you need some help with learning flexbox, check out Kevin Powell's videos on Youtube.
Here's my solution for this challenge: https://www.frontendmentor.io/solutions/card-component-using-cube-css-tNaBY0y_Nx
Keep practicing, and once again, great job tackling your first challenge! :)
Marked as helpful
@ChrisAndrewsDev
Posted
@elaineleung Excellent, thankyou for correcting my suggestion! I didn't even see the floats being used, it makes much more sense now to me why the element spacing is so close together.
@NATiiCODES
Posted
@elaineleung Thank you! that made a lot of sense. It did help with the spacing near the picture. I was able to fix the spacing around the text making it look more accurate!
I also noticed I had a closing </div> that was not in the right place.
I appreciate the feedback!
@elaineleung
Posted
@ChrisAndrewsDev No worries at all Chris, I think it's actually helpful to just throw ideas out, and then we all can learn from them!
@elaineleung
Posted
@NATiiCODES Glad I could help!