Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
11
Comments
1

Joshua

@dyntbnUnited States130 points

I'm really good at pressing the 'enter' key.

I’m currently learning...

CSS and JavaScript.

Latest solutions

  • Responsive Interactive rating component

    #bem

    Joshua•130
    Submitted over 3 years ago

    0 comments
  • Responsive Article preview component

    #accessibility#bem

    Joshua•130
    Submitted over 3 years ago

    0 comments
  • Responsive 3-column preview card component

    #accessibility#bem

    Joshua•130
    Submitted over 3 years ago

    2 comments
  • Responsive QR code component

    #accessibility#bem

    Joshua•130
    Submitted over 3 years ago

    2 comments
  • Responsive FAQ accordion card

    #bem

    Joshua•130
    Submitted over 3 years ago

    0 comments
  • Responsive Profile card component

    #bem#accessibility

    Joshua•130
    Submitted over 3 years ago

    0 comments
View more solutions

Latest comments

  • Alazar Getachew•260
    @AlazarG19
    Submitted over 3 years ago

    status preview card component main

    3
    Joshua•130
    @dyntbn
    Posted over 3 years ago

    Hey Alazar!

    Just completed this today too and woah, yours is near a perfect match, great job! 😄👍

    Answering your question about responsiveness, I have some tips:

    • Use a parent container to wrap your sub-container elements. These would be your .container and .image-container.
    • Utilize the parent container to control its width, either in fixed units, or scaling units such as vw. This would be how you size the main component itself.
    • Utilize the parent containers width restriction to your advantage. Use the % unit to scale it dynamically, splitting that 100% between elements, and ultimately totaling to 100%. If it is over 100%, your content will overflow. This would be your .container and .image-container.

    That should fix your pill component from splitting apart and be responsive to some extent. I'm currently studying more on media queries and responsiveness, so this is the best I've got right now.

    Hope this helps you out! Have a great weekend Alazar.

    Marked as helpful

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