LuccaMauroMolina• 130
@LuccaMauroMolina
Submitted
que podria mejorar en este proyecto? que otras cosas podria agregar o usar?
Ryan Martin
@rmartin93
All comments
- Ryan Martin• 240
@rmartin93
Posted
The text should wrap naturally based on the width of the container.
0 - Bogdan Kim• 780
@semperprimum
Submitted
I would greatly appreciate any feedback you may have!
This challenge presented quite a few difficulties, particularly regarding positioning. Here are my specific concerns:
- I attempted to use a picture element, but unfortunately, I couldn't get it to work properly.
- To address the issue of overflow on the desktop image when resizing the browser, I created an
overflow-hiddenutility class. However, it doesn't look optimal as it clips the left side of the image. - I would appreciate some guidance on whether I positioned the box SVG correctly.
In general, I'm not entirely satisfied with how I positioned the desktop illustration. In hindsight, I believe using a
max-heighton the entire component and using negative margins to position everything might have been a better approach. I might consider revisiting this challenge in the future. However, before doing so, I would greatly appreciate receiving feedback on my current solution.Thank you in advance for your insights and suggestions!
Ryan Martin• 240@rmartin93
Posted
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
1 - Emre• 180
@alwaysJunior
Submitted
Great example for Flexbox. If you notice any problem, please give feedback about that.
Ryan Martin• 240@rmartin93
Posted
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!
0 - Michael Johnson• 970
@mikej321
Submitted
Second project using Bootstrap. I've done a full video course on bootstrap and trying to learn how to use it on my own but I still feel like I'm doing it wrong. One big issue I have is when to actually use a bootstrap container and when to use flex. Also, I dealt with weird issues where some things wouldn't center as they should (I suspect it is due to a conflicting bootstrap property). Anyone willing to look at my code and give me some pointers? Many thanks in advance!
Michael
Ryan Martin• 240@rmartin93
Posted
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
0 - Belly• 300
@Belly606
Submitted
I've Found To Change The HTML Image In Different Media So I've Used One Image ( Desktop Image ) And Change The Dimensions. So I will Be Happy If Anyone Share With Me Better Method Or Any Advice to improve My Code Happ Coding✨
Ryan Martin• 240@rmartin93
Posted
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
0 - LuccaMauroMolina• 130
@LuccaMauroMolina
Submitted
que podria mejorar en este proyecto? que otras cosas podria agregar o usar?
Ryan Martin• 240@rmartin93
Posted
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
0
