Skip to content
OverviewSolutions
5
Comments
5

Michael King

@mking0823Pittsburgh Pa90 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

Latest comments

  • Hoaxilog•170
    @Hoaxilog
    What are you most proud of, and what would you do differently next time?

    Coming up with an idea on how to solve my problem while doing this challenge.

    What challenges did you encounter, and how did you overcome them?

    My problem that encounter is about the image, I started at 375px (mobile device) i set my card (parent element) to padding 1.5rem and i have a child; first is the image, I set position: absolute to stick at the very top and for another child which is the text below the image I set the margin-top to have some space and so I can see the text. Now there's a problem when I do this;

    • The space above the text is so huge when trying to zoom in at 375px.
    • Trying to remove the padding for my div > img but staying the padding for the text below

    SOLUTION

    • instead of relying on same div parent with same padding I make a different parent with the same padding for them. But removing the padding for my image using media queries since it only need to stick at the very top when u are on max-width 375px devices.

    REALIZATION

    • while doing this challenge I thought my path is gonna be easy like there is no problem that I can solve but this problem that i encounter humble me.

    Product Card Solution

    2
    Michael King•90
    @mking0823

    Look into the picture tag I used it and it made 100% easier to switch between tags. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture

    Marked as helpful
  • Michael King•90
    @mking0823

    Nice mobile layout doesn't look like you attempted the pc size. You used the correct ul and ol for each list.

  • Michael King•90
    @mking0823

    Instead of using divs for everything try to use Semantic html tags to improve accessibility.

    Marked as helpful
  • Michael King•90
    @mking0823

    I'm fairly new so .I'm not sure how much feedback I can offer but in my opinion it is perfect. I like how you used variable for you colors and typography and will be trying it in my next project.

  • Michael King•90
    @mking0823

    Looks great only suggestions is are max-width in px and with the width set to 100% So that your box and grow and shrink for something like a single card you may not even need a media media query. Kevin Powell on youtube has a great free course on it. https://courses.kevinpowell.co/conquering-responsive-layouts

    Also per the MDN you should avoid using <br> tags to wrap text in <p> tags. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/br