Skip to content
OverviewSolutions
31
Comments
3
Nguyen Le Vinh
@VinhNguyenLe

All comments

  • Duyen Nguyen•950
    @Duyen-codesSubmitted over 2 years ago

    I'm still stuck with overlay part on desktop version. Any help/ feedback would be greatly appreciated!

    HTML, CSS, JavaScript

    2
    Nguyen Le Vinh•530
    @VinhNguyenLePosted over 2 years ago

    Em chào chị, em xin dùng tiếng Việt được không ạ, tiếng anh của em hơi yếu nên sẽ hơi khó diễn đạt :3 Em muốn chia sẻ một chút về UX/UI, trong project này em thấy khi hover vào thẻ a của nav-links thì chị sử dụng border-bottom để thêm đường thẳng bên dưới. Em thấy cách này khá hay, cơ mà nó có 1 vài nhược điểm:

    • Cái border đó nó cách cái đường border bên dưới của thẻ header khoảng 1px
    • Lúc hover vào cái thẻ a nó làm thay đổi height của header khiến cho người dùng cảm thấy giật giật.
    • Nguyên nhân là khi thêm border làm tăng kích thước của thẻ con gây ảnh hưởng tới thẻ cha, tương tự với trường hợp hover vào avatar
    • Em xin đóng góp cách làm của em đó là sử dụng lớp giả cho thẻ a hoặc cả thẻ a lẫn header, position: absolute để chỉ định vị trí, z-index: -1 nếu sử dụng lớp giả cho header để khi hover vào thẻ a đường thẳng của nó sẽ được hiển thị đè lên đường thẳng của thẻ header.
    • Em có sử dụng cách này cho trang landing page này https://nlv-bookmark-landing-page.netlify.app/
    • Ngoài ra em cũng thấy khi sử dụng devtool responsive thì thẻ checkout-card đang bị chọc ra ngoài. Chị có thể kiếm tra bằng cách bấm shift, giữ chuột phải và kéo về để kiếm tra xem có thẻ nào đang đọc ra khỏi thẻ cha hay không.
    • Chị có thể thêm overflow hidden vào thẻ cha (ở đây là thẻ main) để sửa lỗi này.
    • Mong là chia sẻ của em sẽ có ích ^^
    Marked as helpful
    0
  • Nguyen Le Vinh•530
    @VinhNguyenLePosted over 2 years ago

    Hi, congrats on completing the challenge. I have a few suggestions:

    • You can make the outer padding of your image equal and you are leaving a little margin-top
    • Your line is a bit thick, you can try by replacing it with border
    • When you hover over an image it doesn't appear properly as design active, you can try to assign an after pseudo class to the image that has display none, when hovering, display block
    • Here is my solution, you can refer to it: https://vinhnguyenle.github.io/nft-preview-card/ Happy coding ^^
    0
  • Ophélie Coudert•50
    @Crab-ProgSubmitted over 2 years ago

    I already know there are some problems but I couldn't find a way to correct it. When you hover the picture, i put it in green since I didn't know how to change it into a lightblue and I couldn't add the icon on the picture. Also my blue line is going from all the width... If you have any advices, feel free to help me! Thanks.

    NFT-preview-card-component-challenge

    2
    Nguyen Le Vinh•530
    @VinhNguyenLePosted over 2 years ago
    • Hover problem: you can put a pseudoclass for the tag containing that image, that tag has content as the path to the image view.svg in the images folder, and you give that pseudoclass a background of lightblue, opacity: 0. when you hover on it then opacity: 1
    • Line problem: you can put a div tag containing the entire section above the line, then you add the padding attribute to all sides of that tag, then you create the line with border bottom, the padding outside will not be affected by the border. Remember to reset the css and set box-sizing: border-box
    • You can check my solution
    0