3 Column Preview Card Component
Solution retrospective
Hello, I have a problem with the screenshot generation. My code works normally in browsers, but the generated screenshot is different from my code. How could I solve this problem? Thank you very much :)
Please log in to post a comment
Log in with GitHubCommunity feedback
- @FluffyKas
Hey,
Your solution looks great! I'm not a 100% sure what's causing the problem with the screenshot. If I had to take a guess it has to do something with the
font-size: inherit. I changed the font size to 1rem and that way I was able to recreate the weird behaviour that you can see on the screenshot. If you leave it on inherit, the computed value is only 15px, so that's 1px difference. Maybe you could try to set the font-size in your code explicitly to 0.9375rem. The problem didn't show up on my end so I'm not a 100% sure but that's all I could think of now.Some other things to note:
- Your website your should only have one h1. This is like a main title for a webpage. In this case, since it's just a component you probably don't even need a h1, these headings could be h2 or h3.
- Alt texts are displayed in lieu of an image but if the image only serves decorative purposes (like these icons do), you should leave the alt texts blank, so screen readers can skip it.
Everything else seems great to me, responsiveness is really nice too. Well done!
Marked as helpful - @angelodedaldino
hello my name's angelo could you spare a couple of minutes explained how did you solve the issue of component overflowing when stretching the screen?
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord