Skip to content
OverviewSolutions
12
Comments
6
Umer Khokhar
@Umer-Khokhar

All comments

  • Umer Khokhar•220
    @Umer-KhokharPosted over 1 year ago

    Great Work💯

    0
  • Umer Khokhar•220
    @Umer-KhokharPosted over 1 year ago

    Amazing Work @Loniewski02 👏

    0
  • Umer Khokhar•220
    @Umer-KhokharPosted over 1 year ago

    Hi @Luneaa,

    Your code looks like very good. I have some recommmendation for you to write better code,

    Tip 1: If you want to centered items both horizontally and vertically by flexbox you should set height to 100%

    Tip 2: On cards, always use max width property instead of width only or you can use % if possibe (not in this case) and avoid setting fixed height on cards this will create problems when you are working with the bigger projects to make them responsive

    Tip 3: On card (in this case) if you need to give img full width of as card use % like the

    img {

    width: 100%: (or what ever you want)

    }

    This will make your image resposive don't use px on img because when you reach the maximum width you set on img (in your case 288px) cause problems and you need to do some extra work

    I hope this will help you!

    Happy coding 😊

    Marked as helpful
    1
  • Mishael Joseph•210
    @Mishael-JoeSubmitted over 1 year ago

    Hello, I'm Mishael Joe by name. This was a fantastic project to work on (it was actually easy tho). But, I'm not so sure if I got the media query right, please can someone check it for me? Project link

    QR code component

    3
    Umer Khokhar•220
    @Umer-KhokharPosted over 1 year ago

    Hi there👋,

    Always use flexbox to center items (in your case card)

    .card {

    display: flex;

    justify-content: center;

    align-items: center;

    flex-direction: column;

    }

    One thing more that in media quries don;t set width of img tag set the width to the whole container,

    As you set the max-width to image your design looks bad in mobile devices

    @media(max-width: 370px) {

    .card {

    width: 200px;
}

    In the card case,Never use media quries as set width of card mobile first so

    You should not need any quries I hope this will help you 😊

    Marked as helpful
    0
  • Umer Khokhar•220
    @Umer-KhokharPosted over 1 year ago

    @AlgerTitaJean Hi there,

    Your design looks so so good!. But there are some suggestions for better code

    1. Always use flexbox to center items (Your design did not look good on mobile devices)
    2. Using position: absolute; cause problems when you working on large or complex web pages (May overlap content)
    0
  • Umer Khokhar•220
    @Umer-KhokharPosted over 1 year ago

    Hi there, You should add some of the padding of top, bottom to the container because spacing in such cards made our designs attractive. One thing more that it is always a good to add lighter colors text for the cards i.e. gray, balck bluish, bluish gray etc. Otherwise, you code and design looks pretty good. Good Luck for your coding Journey 😊

    Marked as helpful
    0