card component solution with hover effects

Community feedback

• 

  Nguyen Nguyen•340

  @jesuisbienbienPosted over 2 years ago

  Hi Alicia,

  I took a look at your code and there are a few suggestions I'd like to make in the hope of improving your codes.

  1. SVG image: you can link them using img tag so your html look cleaner

  2. If you set the body width: 100vw, and the width of the card to be 275px, and get rid of the .cube-pix-card width, your component will be smaller, look closer to the design.

  3. The attribution: Since this page isn't responsive, I used position fixed/absolute for the attribution to stay in the middle at the bottom of the page. what i did was: position: absolute; bottom: 0;

  Hope this helps. Happy coding!

  Marked as helpful

  0

  ---

  

  Alicia•40

  @AliciaT08Posted over 2 years ago

  @jesuisbienbien Thanks for taking the time to make suggestions on my code!

  For #1, I fixed this. For some reason I couldn't get the SVG images to work with the img tag when I first tried. But my HTML does look better now, thanks.

  For #2, I'm not super familiar with vw units, but when I add 100vw to the body width it would create a scroll bar on the bottom of my page (that moved very little). However, I did change the card width to 275px, and got rid of the .cube-pix-card width. Thanks.

  For #3, on my last project I tried using a fixed/absolute position for the attribution. However, the only thing I didn't like about that was... (I hope I can explain this correctly) if the page was viewed on a screen that had a viewport height smaller than the design, the attribution would still be fixed at the bottom of the viewing screen and therefore overlap over the design until one scrolled down. (If that makes sense.) I found this out testing the project out on Chrome's DevTool, where you can change the size of the viewing screen. Perhaps because this design wasn't meant to be viewed on small screens this is not actually going to be a problem?

  1

  

  Nguyen Nguyen•340

  @jesuisbienbienPosted over 2 years ago

  @AliciaT08 Thank you for taking my suggestions into consideration and replying back to me. I checked your website on mobile and it looks great. For desktop viewing, my other solution was to align the attribution in the middle and set a margin-top. Hope this helps :D

  0