@pyaetheiN
Posted
Hello Halibal! Nice job completing the challenge, love that you added a different nft :) Anyways about your questions,
- remove
width: 100%and addpadding: 0 1remto yourbodytag - make a media query where you make the font sizes smaller and that should make your design look a lot better in smaller screens
I don't really recommend you adding width property on body tag, just add height or min-height and only add width when you need to on containers inside body. That's it for my feedback, happy coding as always!
Marked as helpful
@halibal
Posted
@pyaetheiN Hi Ricky,
Thank you so much! :))
I started another challenge and tried to implement your tips about both media query and height, yet still had to use the width property to fit it inside the div properly (with bootstrap "w-100")
But still there is the question remains that on mobile version, the hover state where the nft image gets transparent etc overflows to the below divs. I couldn't figure a way out of it.
Thanks again and happy coding, too!
@pyaetheiN
Posted
@halibal I suggest you take a look at my solution (https://github.com/pyaetheiN/NFT-preview-card-component) copy paste the link inside the brackets into your browser.
- I created a
divfor the overlay and to make it work,inset: 0;is crucial because what it does is it fills up all the available space inside a container - for more information about
insetcss property (https://developer.mozilla.org/en-US/docs/Web/CSS/inset)
The reason why your overlay hover effect isn't working is because you added a specific height height: 28rem so it's stuck at 28rem even in mobile screens. My method avoids using height so it solves the problem you're having.
