Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive View Solution using CSS and Media Query

P
Ann 80

@anastDev

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


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

As a newbie in the coding world, I'm most proud of my determination to keep learning new concepts and pushing through challenges. Trusting the process has been key to my growth. Next time, I'd like to explore different approaches and be more flexible in my problem-solving.

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

Struggles : One of the challenges I encountered was figuring out the best way to position the elements inside the card. Initially, I struggled with how to align everything properly to achieve a balanced and visually appealing layout.

My Approach : To overcome this, I explored different CSS properties, such as position and display. Through trial and error, I learned how to effectively use display: flex and other related properties to control the alignment and spacing of the elements. This process not only helped me solve the immediate problem but also deepened my understanding of CSS layout techniques, which will be valuable in future projects.

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

I'd like help with a few specific areas of my project:

  1. Integrating Bootstrap's Card Component with Custom CSS : I want to understand how to effectively use Bootstrap's card property while incorporating custom CSS to personalize the design.

  2. Exploring Alternative Methods to Center the Card : I'm interested in learning different techniques for centering the card within the page, beyond the methods I've already used.

  3. Enhancing Responsiveness : I'm looking for alternative approaches to improve the responsiveness of the card, ensuring it adapts seamlessly to various screen sizes.

Community feedback

Please log in to post a comment

Log in with GitHub
Discord logo

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