Skip to content
Submitted over 3 years ago

Card Component using position:absolute and display flex

Amritha Imandi•10
@mrskodi
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Profile card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Hello fellow FEMs,

Just finished my very first challenge here on FEMs. Being the first challenge, it was truly challenging to even understand and come up with the basic html layout. I would greatly appreciate it if anyone could take the time to look at my code. I do have some questions listed below. I would be truly grateful if anyone can clarify it:

  1. My card is centered horizontally and vertically. When reducing the width of the viewport, it behaves just fine on my end (no media queries yet). However, when reducing the viewport height, the typography is not responsive. How can I implement that?

  2. How is the following data helpful? "The designs were created to the following widths:Mobile: 375px, Desktop: 1440px". All I did was to set the max-width of my container to 1440px. How am I supposed to use the width given for mobile design?

  3. Should I use any media queries for mobile view? My mobile view is clearly different from the design that has been given. Any help/clarification is greatly appreciated! Best, Amritha

Community feedback

  • drallas•375
    @DrallasPosted over 3 years ago

    Hi Amritha

    I'm also new here and planning to do this challenge as my first one. I guess that's why it was grabbing my attention. So I downloaded the starter kit and opened it in VSCode, but the Style guide is not specific about the size of the card.

    I stumbled on frontendmentor.io yesterday watching Coder Coder on YT doing a challenge from the site, Jessica Chan's videos are easy to follow and she shares her thought proces, this is very helpful learning to understand frontend!

    She uses a little trick, loading the design in Adobe XD or Figma and then drawing a helper guide to measure the height / width or sizes of elements.

    Looking at the design, the card height is for both designs (Mobile / Desktop) the same; the width for desktop is slightly more.

    I guess in this situation you could get away setting a fixed height, since this fits in the viewport of most modern mobile devices anyway.

    0
    Amritha Imandi•10
    @mrskodiPosted over 3 years ago

    @Drallas Thanks so much for the insight and sharing about Coder Coder doing FEM challenge on YT. I will make sure to watch it and follow along. I am sure there will be lots to learn from the process. Appreciate sharing your feedback!

    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord