All comments

• 

  P

  Michael•380

  @MlchaellSubmitted about 2 years ago

  I only have one question - How would I do the .extra-card-section without using the media queries? If I do it without the queries, the a tag gets pushed out of the section on the right

  Also, if anyone else ideas/feedback on how I could do anything else better, let me know!

  

  Order Summary Component (Vanillia CSS)

  3

  80
  

  SD_Voyez•110

  @SD-VoyezPosted about 2 years ago

  Hi !

  First off all, good job :)

  For me the mistake is to use margin-left with your tag <a>, it brokes everything when you reduce screen.

  You should trie to :

  • Remove your margin-left in your tag <a>
  • Put a justify-content : space-arround in your class .extra-card-section

  I tried with your code and it's much better.

  Sorry for my "french" english, hope you understand me :)

  Regards.

  Marked as helpful

  1
• 

  Prakash Natarajan•50

  @Prakash1411Submitted about 2 years ago

  Having difficulties to have the opacity of 1, for the hover image. Will be helpful if someone could guide me how it can be done. Thanks!!

  

  NFT Preview card

  2

  50
  

  SD_Voyez•110

  @SD-VoyezPosted about 2 years ago

  Hi !

  Nice work.

  I had the same problem, so i put opacity at 1 for the SVG "eye" when hover and play with HSLA and the "background-color transparency".

  In your case it will be something like : background-color: hsla(178, 100%, 50%, 0.502);

  With your code :

  .top-section:hover .overlay { opacity: 1; }

  .overlay { display: flex; justify-content: center; align-items: center; position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: 100%; width: 100%; opacity: 0; transition: .5s ease; background-color: hsla(178, 100%, 50%, 0.502); border-radius: 10px;

  HSLA : https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsla

  Regards :)

  Marked as helpful

  1