Skip to content
OverviewSolutions
10
Comments
3
ABHAY GAUTAM KAMBLE
@abhay8696

All comments

  • ABHAY GAUTAM KAMBLE•340
    @abhay8696Posted about 2 years ago

    Hey musab, you've given very nice try up here. It seems you have very good skills in css. For validations, using java-script conditional statements would be a better approach, and also using them with use-state can be useful. Or for simpler approach you can also add 'required' in html element.

    You can use use-state hooks for storing values in form inputs and display them on cards.

    Since we need to maintain aspect ratio of card images , use px (instead of % and rem) for setting width and height. Change these values with different screen sizes.

    Hope this helps. Thank You :)

    Marked as helpful
    1
  • Jacob Seymour•50
    @JacwilalaseySubmitted about 2 years ago

    Thanks for checking me out!

    One issue I didn't figure out, how do I get the QR code img to resize with the rest of the card component when sizing down to mobile?

    Thanks, Jac

    QR Component Card challenge

    1
    ABHAY GAUTAM KAMBLE•340
    @abhay8696Posted about 2 years ago

    Hey @Jacwilalasey, You need only one div in body element. And to keep that div in center of page, use flexbox as shown below: body{ height: 100vh; display: flex; align-items: center; justify-content: center; } This will keep your content in center always. And for the image size issue, keep its max-width to 100%.

    Hope this helps, thank you.

    Marked as helpful
    1
  • Odalloc•170
    @OdallocSubmitted about 2 years ago

    I use the absolute position on each column's button so they will always stay equal at the bottom. Is it alright? Or is there a much better approach to this? Any suggestions will be helpful, thanks!

    3 Column Preview Card Component using Grid

    2
    ABHAY GAUTAM KAMBLE•340
    @abhay8696Posted about 2 years ago

    Hey @Odalloc, great work you have did here. I've used flexbox to give proper spacing to the contents of the cards. Here's what I did to card div: display: flex; flex-direction: column; align-items: flex-start; justify-content: space-evenly;

    You can also add "role = 'main' " attribute in section element to resolve accessibility issue.

    Marked as helpful
    1