Ryan Martin
@rmartin93All comments
- @LuccaMauroMolina@rmartin93
The text should wrap naturally based on the width of the container.
- @semperprimum@rmartin93
overflow-hidden is great actually! The solution is supposed to have the image clipped so I think this is perfect.
If you want to avoid that, you could use background-image instead and play around with learning that. It's a useful one to know, since background-image opens up the door to do a lot of stuff you wouldn't normally be able to do with just putting the svg directly into the div.
Kevin Powell has some good videos going over some general background-image stuff if you want to learn more.
Happy coding!
Marked as helpful - @alwaysJunior@rmartin93
Only issue I really see is the button doesn't have a cursor hover effect on it. I would also look into using transition to control the speed at which the color changes. It's a small improvement, but one you'll use in everything once you know about it.
Happy coding!
- @mikej321@rmartin93
Can you give an example of a situation where you were trying to center something and couldn't?
As for container vs flex, they aren't really related. Containers are for controlling max-widths essentially, and rows are where the flex comes in.
As for row vs flex, I personally will use flex if I don't want to deal with the column gutters stuff, but most of the time rows and columns work great.
Hope that makes sense!
Marked as helpful - @Belly606@rmartin93
Consider removing the image from the image div and adding the following CSS
.image { background-image: url(images/image-product-desktop.jpg); width: 250px; background-size: cover; }
This will ensure that the image takes up the full height of the div.
If you ever run into issues with border-radius and background-image, just use a overflow: auto.
Happy coding!
Marked as helpful - @LuccaMauroMolina@rmartin93
I would focus on simplifying the html and css. You shouldn't need as many p tags as you have, and you're making a lot of things display flex when a text-align center would be just fine.
Example html simplification
<div class="marco"> <div class="card"> <div class="card-image"> <img src="./images/image-qr-code.png" alt="QR"> </div> <div class="card-body"> <h2 class="oscuro">Improve your front-end skills by building projects</h2> <p class="frontend">scan the QR code to visit frontend mentor and take your coding skills to the next level</p> </div> </div> </div>
From there, it shouldn't take much CSS to make the h2 and p tag look how you want. I would try just using text-align and play with that a bit.
Happy coding!
Marked as helpful