Frontend Mentor | Skilled e-learning landing page coding challenge solution

Solution retrospective

This was a fun one! Two things that kinda puzzled me:

Did I pull off the image positioning in a correct way? It definitely works, but I don't know if it actually the way to go. Also, when I inspect it in Chrome, the overflow-x:hidden; did not work and there was a horizontal scroll bar. All good on Mozilla.
I could not get the height of the cards correct in the Desktop version. I'm sure I am missing something, but couldn't quite figure out what.

Any feedback would be very much appreciated, thank you!

Community feedback

@kdubrovsky

Posted about 1 year ago

Hi, Mario! That was a great challenge, wasn't it? ) I'll try to clear for you some things:

you can fix horizontal scroll by setting overflow-x: hidden for html tag (check this out)
you might get rid of large image for hero section for pure css/html reconstruction of that statistics and gradient
cards height is controlled by intrinsic elements size. Check line-heights, font-size and margins there to fix it Wish you the best and feel free to check my solution on GitHub 🙏

@MarioMinchevski

Posted about 1 year ago

@kdubrovsky

Thank you for the feedback Constantine!

I have overflow-x: hidden for my body tag. And it works when you open the page. The scroll bar would appear only when I would open DevTools on Chrome, which I found odd. On Mozilla was fine in every scenario.
As for the cards, you're right. Should be something like that :)

@kdubrovsky

Posted about 1 year ago

@MarioMinchevski You should try to set overflow-x: hidden for html and body.

Skilled e-learning landing page