Skip to content
OverviewSolutions
13
Comments
6

Umer Khokhar

@Umer-Khokhar250 points

👋 I strive to enhance my skills and create captivating user experiences. Passionate about crafting beautiful and functional interfaces, I am dedicated to staying updated with the latest industry trends. With a strong foundation in HTML, CSS, and JavaScript.✨

I’m currently learning...

📌 ReactJS

Latest solutions

View more solutions

Latest comments

  • Umer Khokhar•250
    @Umer-Khokhar

    Great Work💯

  • Umer Khokhar•250
    @Umer-Khokhar

    Amazing Work @Loniewski02 👏

  • Umer Khokhar•250
    @Umer-Khokhar

    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
  • Umer Khokhar•250
    @Umer-Khokhar

    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
  • Umer Khokhar•250
    @Umer-Khokhar

    @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)
  • Umer Khokhar•250
    @Umer-Khokhar

    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