Skip to content
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted about 1 year ago

responsive web design - mobile and desktop

Katarzyna Kaźmierczak•260
@KasiaKaz14
A solution to the Product preview card component challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

Solution retrospective


What are you most proud of, and what would you do differently next time?

I am proud I nailed it. It took much more time than I expected because had some problems with the picture. Now I know one of the ways to do that and just added two 's with for every design and added two classes for them. Next I applied display: block/none dependently on the design. But I am really open for suggestions. If someone knows a better way to to it faster/better - just write a comment. I'll be grateful.

What challenges did you encounter, and how did you overcome them?

As I wrote the biggest challenge was adding pictures for every design, because the background-image does not work, and I don't know why. So I must give up much time to resolve the problem and make that pictures displayed properly. I just added two img's to the html file, and two different classes with using display: block/none for them. Next challenge was when I tried to apply Responsive Web Design, and arrange all the elements in my project. Sometimes, when you want to arrange the desktop/tablet/mobile - something in the other one can break and you still need to check others designs to fix bugs online.

What specific areas of your project would you like help with?

I am just looking for a better way to add images for every design in a proper way. I'll write it again. The background-image did not want to work today, and I do not know why. I managed to do it, but maybe someone wants to share a better way with me.

Code
Loading...

Please log in to post a comment

Log in with GitHub

Community feedback

No feedback yet. Be the first to give feedback on Katarzyna Kaźmierczak's solution.

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

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner
  • Use cases

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License