Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
5
Comments
6
Ryan Martin
@rmartin93

All comments

  • LuccaMauroMolina•130
    @LuccaMauroMolina
    Submitted about 2 years ago

    display flex

    4
    Ryan Martin•240
    @rmartin93
    Posted about 2 years ago

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

  • Bogdan Kim•780
    @semperprimum
    Submitted about 2 years ago

    Responsive FAQ Accordion Component

    #sass/scss
    1
    Ryan Martin•240
    @rmartin93
    Posted about 2 years 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
  • Emre•180
    @alwaysJunior
    Submitted about 2 years ago

    Result Summary Component

    2
    Ryan Martin•240
    @rmartin93
    Posted about 2 years 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!

  • Michael Johnson•950
    @mikej321
    Submitted about 2 years ago

    NFT-bootstrap solution

    2
    Ryan Martin•240
    @rmartin93
    Posted about 2 years 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
  • Belly•300
    @Belly606
    Submitted about 2 years ago

    Product Preview Card Component

    2
    Ryan Martin•240
    @rmartin93
    Posted about 2 years 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
  • LuccaMauroMolina•130
    @LuccaMauroMolina
    Submitted about 2 years ago

    display flex

    4
    Ryan Martin•240
    @rmartin93
    Posted about 2 years 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
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub