P
@Matthieu83600
Latest solutions
NFT card challenge
PSubmitted 4 months agoThe overlay I'm using in the hover state, for some reason is covering a couple more of pixels than the image, Can anyone spot the issue?
Latest comments
- P@Melbita
Nicely done!
- P@JF451What are you most proud of, and what would you do differently next time?
I am proud of how I used media queries to align things. I want to do differently how to position the top logo with ::before and ::after pseudo elements.
What challenges did you encounter, and how did you overcome them?I had difficulty aligning the items across different device sizes.
What specific areas of your project would you like help with?I would have help with the layout of the site.
P@MelbitaHi Justin,
I'm not able to see your project images, you can start checking if they're linked propperly where you hosted the page. You can also use media queries to adjust how some ui elements are displayed, this particular project display some of them differently according to the viewport size ex(mobile,tablet,desktop). I just finished the same project, check my profile if you would like to check for some ideas on how to tackle some of the challenges.
- @rounakkumarsinghP@Melbita
Unfortunately I was not able to see the code, however I would say based on the screenshot comparison: Check the white card background color, looks transparent, other than that, the card container could be vertically/horizontally centered.
- @taufiqz11P@Melbita
Looks good overall,
One suggestion could be to tweak the html to make it more semantic, using html tags such as main, header, section etc.
- @AnahiSUP@Melbita
Overall looks good. I liked how you used shorthands for border radius.
Personally I rather use classes instead of a bunch of #Ids. Regarding the images, you can directly use <picture> and srcset instead of displaying/hiding the images in your css.
Well done!.
- P@DonahuecWhat challenges did you encounter, and how did you overcome them?
Took awhile to figure out how to match the list styling to the design. First I tried to update the ::marker element, but ended up settling for styling a ::before element and using css counters
P@MelbitaYour solution looks super clean, Great use of css variables, and the mobile version looks identical.
Well done!
