3-column preview card component

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  Hello Tauri! How are you? Congratulations for your solution.

  You said you're interested on other people solution, so here is mine, note that I've changed a lots the design and I played with the hover, dont consider the design if is ugly in comparison the original 😂:

  https://www.frontendmentor.io/solutions/3-column-preview-card-vanilla-css-custom-design-and-hover-states-e5uAfmUT71

  • You probably know that, but you've missed three properties to center the container:

  body { height: 100vh; display: flex; align-items: center; }

  • Note that the border-radius isn't the same for all cards, the central one in the desktop version doesn't need border-radius since its in center. For the mobile design the card 1 needs border-radius only on top and the opposite for the card 3.

  I hope it helps you, welcome to Frontend Mentor community! 😊

  Marked as helpful

  0

  ---

  

  Tauri StClaire•40

  @tauri-stPosted over 2 years ago

  @correlucas You are a POWERHOUSE of code review and giving excellent feedback!

  I don't know if you realized, but I got a ding about your feedback EIGHT MINS after posting my solution so you have set the bar VERY HIGH for my expectations from here on xD I kid

  I LOVE your solution and thank you so much for sharing with me! I gave you feedback on your project. :)

  You recommended I set my body height to "100vh" and I have never seen vh units used before so I looked that up! Very cool! I can see why you would use this unit when setting a height for the main block (or vw for the width)!

  I resubbed my solution based on your feedback!

  1

  

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  @tauri-st Hello Tauri, you're welcome!

  A fun fact is that in my first day, someone give me the same feedback about using the height: 100vh; inside the body, I remember this commentary was in the QR Code challenge at this point I yet knew this unit but I haven't idea about when use it. 🤣

  Another case you can use the 100vh unit is when you create an website/landing-page where which section fill all the screen (you've probably seen one page like that). The 100vh make sure that this section in particular will display 100% of the viewport height, you can play around these values and display 50% for example and make two section displayed in the screen.

  I'll let you some resources to help you in your Frontend Mentor journey.

  1.In my opinion the best source for css content in youtube:

  Kevin Powell: https://www.youtube.com/watch?v=3Y03OSNw6zo

  **2. The guide for CSS units (https://www.w3schools.com/cssref/css_units.asp):

  em - Relative to the font-size of the element (2em means 2 times the size of the current font) ex - Relative to the x-height of the current font (rarely used) ch - Relative to the width of the "0" (zero) rem - Relative to font-size of the root element vw - Relative to 1% of the width of the viewport* vh - Relative to 1% of the height of the viewport* vmin - Relative to 1% of viewport's* smaller dimension vmax - Relative to 1% of viewport's* larger dimension % - Relative to the parent element

  3.I saw that you added in your Github folder some screenshot images, these screenshots captured all the screen also the browser favorites. In Google Chrome DevTools you can have an automatic-screenshot when you open the Mobile Device Mode theres a 3-dot menu in the top-right border where if you click will display the option "capture a full-size screenshot" this will automatically download a png image of your screen for any screen-size you set (mobile / desktop). Its really useful, try that.

  I'm happy with your words, I hope my previous feedback help you to improve your solution. I'm looking forward for your next solution.

  Happy Coding Tauri😀

  Marked as helpful

  1

  

  Tauri StClaire•40

  @tauri-stPosted over 2 years ago

  @correlucas Thank you SO MUCH for taking the time to share your knowledge and resources with me!

  Using vh/vw at 100% for full-cover landing pages makes so much sense! :mind-blown:

  Aw yea, it was W3schools I looked thru to orient myself. Thank you so much for the additional explanation.

  And ROGER on the browser screen shot!

  0