3-column preview card component

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted over 3 years ago

  Hey, great work on your first solution here in FEM!

  The layout is a bit small in desktop and the mobile state, the top part is can't be seen.

  So a couple of suggestions would be;

  1. Do not use height: 100vh. I always recommend "not" using this since this will limit a selector based on the remaining viewport's height. Like in your container selector, that is declared, so whenever I fired dev tools at the bottom, your layout is pushed to the top and gets cuts off. I advise not using this, instead use min-height: 100vh and make the element just use another sizing unit like rems.

  2. Buttons. On your button, maybe changing the default border. Since default border doesn't really look that good, well for me. But that is preference. (Make it border white :>>)

  3. Wrong font. I think you are using a wrong font here, the original is using a sans-serif of type and yours is a serif. Might want to check that one out.

  4. Huge padding. In your container selector. You are using too much padding and if you inspected it, you will see that the width of the container is very small and does not really captures the element inside it while the padding is very big.

  5. Breakpoint. When resizing, your element gets cut off by the viewport's width thus creating a horizontal scrollbar which we really avoid. Maybe making a custom layout at about 600px going down to 375px. Creating those breakpoint is really important and dedicating their respective layout to prevent unwanted effects will be really good.

  If you need help on those mentioned above, just drop your query here okay. But still, you did a good job^

  0

  ---

  

  Cheyenne Piper•80

  @PiperRcPosted over 3 years ago

  @pikamart Thank you for your reply! I will go over them and make the revelant changes.Thank you again.

  0

  

  Cheyenne Piper•80

  @PiperRcPosted over 3 years ago

  @pikamart when I make changes to the gihub code, does it update here, do I have to upload a separate solution?

  0

  

  Raymart Pamplona•16,100

  @pikapikamartPosted over 3 years ago

  @PiperRc hey, it will automatically update your website in here. As long as you push those, your website will be updated

  0
• 

  Cheyenne Piper•80

  @PiperRcPosted over 3 years ago

  On the design comparison , the 3rd column is off. But the preview on the website is not.Any advice on why that is

  0