NFT preview card component Challenge responsive - HTML & CSS V2

Community feedback

• 

  Elaine•11,400

  @elaineleungPosted about 2 years ago

  Hi Raink31, great job on your second solution for this challenge, as I felt many things were done well, such as centering the component using flexbox and using max-width for the card. In terms of suggestions, I only got two:

  1. You can remove the height property from image because right now, if I resize the browser and make it smaller until card starts being resized, the image would have a smaller width compared to its height. This is because the height is fixed and is not responsive, removing the height will make it responsive!

  2. Instead of using percentage sizes to put spacing around the inner contents, add a padding: 1.5rem on wrapper, and remove all the width: 85% as well as the margin-top from the image and padding-top from the bottom footer.

  That's all I got for now, great work here!

  Marked as helpful

  1

  ---

  

  Raink31•340

  @Raink31Posted about 2 years ago

  @elaineleung Thanks for the suggestions !

  I've writted height for the image because without it, the over with the eye doesnt work on google chrome.. (It works well on firefox).

  Do you know where this can come from ?

  0

  

  Elaine•11,400

  @elaineleungPosted about 2 years ago

  @Raink31 No worries! In that case, change the height to 100% instead of 290px, and in the ::after pseudo element for your eye icon, try using this for centering:

  .img-box::after {
    position: absolute;
    content: url("assets/images/icon-view.svg");
    top: 0;
    opacity: 0;
    display: grid;
    place-content: center;
    height: 100%;
    width: 100%;
    transition: opacity 0.4s;
  }
  

  Let me know how that goes, and if it doesn't work we'll try something else 🙂

  1

  

  Raink31•340

  @Raink31Posted about 2 years ago

  @elaineleung Thanks, the eye centering works well :)

  the padding : 1.5rem works well with the text, but not with the over..

  I applied height: 100% instead of 290 px but the over still goes out of the image... I updated my site preview so you can see what it does (It works well on firefox, and doesnt work with chrome, edge, brave)

  Thanks for your help !

  1

  

  Elaine•11,400

  @elaineleungPosted about 2 years ago

  @Raink31 Yes, looks good on Firefox! On Chrome, I can see the overlay going out of the container at the bottom, and if that's what you are referring to, try adding display: block to the img. The reason this bit of space occurs is because img behaves like an inline element, meaning that it would take some line spacing. I just added display: block using the Chrome inspector just now and it seems to have gotten rid of the space.

  One thing I normally do is, I use a CSS reset in all my projects, and in the reset there's a rule for img that includes display:block so that I wouldn't have to add that to every single image. Let me know if that works!

  Also, about the 1.5rem padding, everything looks fine as far as I can tell with the overlay; can you describe the issue you are seeing?

  1

  

  Raink31•340

  @Raink31Posted about 2 years ago

  @elaineleung It worked ! I'm gonna add display : block as a rule for my img too :) Thanks !

  1
• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted about 2 years ago

  Hello Raink31,

  Congratulation on completing another frontend mentor challenge.

  Excellent work! I have some suggestions regarding your solution:

  • Use the <footer>landmark for the attribution.

  • The most important part in this challenge is the interactive element. Since there's a :hover state on the image and means it's interactive, So there should be an interactive element around it. When you create a component that could be interacted with a user , always remember to include interactive elements like(button, textarea,input, ...) For this imagine what would happen when you click on the image, there are two possible ways:

  1: If clicking the image would show a popup where the user can see the full NFT, here you use <button>.

  2: If clicking the image would navigate the user to another page to see the NFT, here use <a>.

  • You should have used <a> to wrap Equilibrium #3429.

  • The link wrapping the equilibrium image (image-equilibrium) should either have Sr-only text, an aria-label that indicates where the link navigate the user(not describes the image).

  • For any decorative images, each img tag should have empty alt="" and add aria-hidden="true" attributes to make all web assistive technologies such as screen reader ignore those images in (icon-view, icon-ethereum, icon-clock).

  • Profile images like that avatar are valuable content. The alternate text of the avatar’s image should not be** img-avatar**. You can use the creator's name Jules Wyvern. Read more how to write an alt text

  • look up a bit more about how and when to write alt text on images. Learn the differences with decorative/meaningless images vs important content

  • There are so many ways to add the hover effect on the image , The one I would use, using pseudo-elements to change the teal bg color to a hsla. Then opacity can be changed from 0 to 1 on the pseudo element on hover. There is no need for a extra clutter in the HTML.

  • Adding rel="noopener" or rel="noreferrer" totarget="_blank"links. When you link to a page on another site using target=”_blank” attribute , you can expose your site to performance and security issues.

  Hopefully this feedback helps.

  1