Skip to content
OverviewSolutions
7
Comments
6
Dumte Nwidoobee Joshua
@Dumte

All comments

  • HoangTuanAnh•390
    @TuanAnh45468Submitted over 1 year ago

    Hi there, I'm Tuan Anh and this is my solution for this challenge

    Built with

    • TailwindCSS

    Any suggestions on how I can improve my code are welcome

    Thank you 😊.

    Responsive single price grid component

    2
    Dumte Nwidoobee Joshua•100
    @DumtePosted over 1 year ago

    Please I'm currently learning tailwind css. Can you connect with me on twitter so you can help me in the installation process?

    0
  • Abdul Khaliq 🚀•72,560
    @0xabdulkhaliqSubmitted about 2 years ago

    👾 Hello, Frontend Mentor community,

    This is my solution for the QR Code Component.

    • Semantic Markup for Better Accessibility.
    • BEM Naming convention was used to handle CSS.
    • Tried my best to build as closer to the design as possible.
    • Feel free to leave any feedback and help me to improve my solution (or) make the code clean!

    👨‍🔬 Follow me in my journey to finish all newbie challenges to explore solutions with custom features and tweaks

    Ill be happy to hear any feedback and advice!

    QR Code Component 🎯 [ SEMANTIC MARKUP + VANILLA CSS + BEM ]

    3
    Dumte Nwidoobee Joshua•100
    @DumtePosted over 1 year ago

    Please take a look at my solution. I want you to suggest to me how to improve on it.

    1
  • Dumte Nwidoobee Joshua•100
    @DumtePosted over 1 year ago

    Yours is the simplest solution I think

    0
  • Dumte Nwidoobee Joshua•100
    @DumtePosted over 1 year ago

    The first thing here is to center the container both vertically and horizontally.

    body {
    min-height:100vh;
} 
main{
    display: flex;
    place-items: center;
}

    In this case your container will find itself at the very center of the browser.

    Note that I've replaced justify-content and align-items center with place-items: center; and it still does the same thing.

    Marked as helpful
    0
  • Dumte Nwidoobee Joshua•100
    @DumtePosted over 1 year ago

    Nice work dear. Honestly I did almost the same thing you did. By the same thing, I meant an unresponsive card.

    Four months later, I got more ideas to turn my code into mobile version but I have to leave it there so that I will get back to eat at some point in time and be motivated of how I have improved

    0
  • Dumte Nwidoobee Joshua•100
    @DumtePosted over 1 year ago

    You can position the card at the center of your page by applying these snippets

    body { display: grid; place-items: center; min-height: 100vh; }

    Secondly, your work is not responsive to mobile device. If you are using grid, in your media query, you can apply container{ grid-template-columns: 1fr; }

    To make it single column on mobile device.

    Thirdly, the topography of your card doesn't correlate with the actual design. The actual design doesn't have a button shadow.

    0