Skip to content
OverviewSolutions
5
Comments
6
Ryan Martin
@rmartin93

All comments

  • LuccaMauroMolina•130
    @LuccaMauroMolinaSubmitted over 1 year ago

    que podria mejorar en este proyecto? que otras cosas podria agregar o usar?

    display flex

    4
    Ryan Martin•240
    @rmartin93Posted over 1 year ago

    The text should wrap naturally based on the width of the container.

    0
  • Bogdan Kim•780
    @semperprimumSubmitted over 1 year ago

    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-hidden utility 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-height on 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!

    Responsive FAQ Accordion Component

    1
    Ryan Martin•240
    @rmartin93Posted over 1 year ago

    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
    @alwaysJuniorSubmitted over 1 year ago

    Great example for Flexbox. If you notice any problem, please give feedback about that.

    Result Summary Component

    2
    Ryan Martin•240
    @rmartin93Posted over 1 year ago

    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
    @mikej321Submitted over 1 year ago

    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

    NFT-bootstrap solution

    2
    Ryan Martin•240
    @rmartin93Posted over 1 year ago

    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
    @Belly606Submitted over 1 year ago

    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✨

    Product Preview Card Component

    2
    Ryan Martin•240
    @rmartin93Posted over 1 year ago

    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
    @LuccaMauroMolinaSubmitted over 1 year ago

    que podria mejorar en este proyecto? que otras cosas podria agregar o usar?

    display flex

    4
    Ryan Martin•240
    @rmartin93Posted over 1 year ago

    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