@vanzasetia
Latest solutions
Latest comments
- @Emmiecodes
Hello Vanza,
I was doing the order-summary challenge and was trying to focus more on accesibility doing so, and I came across the issue of having to use a div for the subscription plan and price part so I started googling the use of the role attribute and a ton of other things and came across your page that way. I saw you also used a div for the same part as I did, without adding a role attribute to it for screenreader users to make sense of the div. (I had no clue what role to add when I looked them up)
Afterwards I went looking at your NFT card solution which did help me out with realizing I could use the figure and figcaption with flex styling too, and aside from that there are some nice accesibility features you have, I had not thought about or seen before, like adding the abbrevation (before I had no clue what ETH was either) and the custom focus effect on your order summary. I like how you normalize accesibility in your code and the questions you ask on here, that should be an example for all. I was wondering though why you chose to use UL's for the currency and days left part instead of divs and why you didn't do so for the subscription info/costs in the order summary? And if you deliberately chose to keep your alt="" descriptions short? It makes me think about how meaningful those images really are to screenreader users or non screenreader users wanting to buy crypto and wonder if my alt descriptions are too long for this context. (Eg: white boy with brown hair, bangs and cream colored shirt)
Marked as helpful - @NIk22517@Emmiecodes
Hi Nikhil, I liked how you personalized your hover-effect and saw you had the same problem I had with the overflow. Try using the line-height property with a value of 0 on your container-img. It is also worth trying to change the height values on the body and html elements. I am not entirely confident with that myself. Editing this comment because I gave not helpful advise after I checked in my browsers inspect mode about the height on the HTML/body. I hope the oveflow options helps you though.
Marked as helpful - @hyrongennike@Emmiecodes
Hi Hyron, you helped me out a few days ago and I ran against a problem with my NFT card (got the svg image on top showing yesterday but changed something I can't remember so it doesn't anymore) so I came lurking at other peoples codes. Now I saw you also had the problem with the overflow which took me a while to fix too. (not yet updated on github) When you set the line-height to 0% on the image container the overflow will be fixed without having to set a max-height and overflow: hidden.
- @saminstein@Emmiecodes
Hi Saminstein, nice job! Have you considered using display: flex for the .card-prices to get them inline? For the structuring I have no answers, still trying to fix mine but yours looks pretty good!
