All comments

• 

  Cesar D.•400

  @ThatDevDiazSubmitted over 1 year ago

  My biggest challenge with this one was the hovering img change. I was able to get the ::hover pseudo element to work with all of the elements except the img. I tried a few methods like background-img and using ::before and ::after psuedos but for some reason the img would not show when hovering. The curser shows, so I know the hover element works, but the img did not.

  I'd appreciate any advice on this one!

  Used straight HTML and CSS. No SASS, no frameworks, and no original design files used.

  

  NFT-Preview-card-component

  2

  40
  

  Jeremy Flodin•260

  @jeremyoduromanuPosted over 1 year ago

  Okay. In order to make the view icon appear when you hover on the image, you can place the container of the view icon on the image container using position absolute and set the same width and height of the image container to the view icon container.

  Next, you can make the view icon appear on top of the image using z-index, and then set the opacity of the view container to 0 (with that the view icon and the container become transparent which makes it looks like the image is on top) and you set a hover effect on the view container with opacity 1.

  Marked as helpful

  0

  This comment has received 1 replyShow
• 

  Alexeymitin•10

  @AlexeymitinSubmitted over 1 year ago

  What is the best way to centre the QR code, Flex or position: absolute? How would you position the QR code (flex or grid)?

  

  First challenge - QR code

  2

  70
  

  Jeremy Flodin•260

  @jeremyoduromanuPosted over 1 year ago

  I normally center elements using the flexbox because I find it simple to do.

  1
• 

  P

  Orazbek•110

  @orazdaurenovSubmitted over 1 year ago

  Hi everyone !! I'm a junior software engineer, passionated by the DevWorld. Here's my first practical exercise, I think I've made it, but it seems that I did smth wrong that the QR-code image is not positioned properly, it goes little bit off to the right side. I tried lots of things, but this issue is unchanged for now. I would highly appreciate your advices to fix that. Thank you in advance !!

  

  QR Code page

  1

  10
  

  Jeremy Flodin•260

  @jeremyoduromanuPosted over 1 year ago

  In order to center the image you'll have to change the display in the box class to display flex.

  Justify-content and align-items only works when the display is set to center

  0
• 

  mirzafaisalbaig•20

  @mirzafaisalbaigSubmitted over 1 year ago

  It was difficult😅 As it was my first project but anyhow i did it.

  

  Used Html and Internal CSS to build QR-Code

  3

  10
  

  Jeremy Flodin•260

  @jeremyoduromanuPosted over 1 year ago

  It is good habit to contain all page content in a container/landmark like "main" for accessibility.

  Also, try adding this to the body element css code min-height: 100vh display: flex justify-content: center align-items: center This will center your content container

  0