Submitted 6 months ago

qr-code-project

Lufredade•20

@Lufredade

A solution to the QR code component challenge

Preview Code

Solution retrospective

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

centering the div and the predicting the most precise pixel for the sizes

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

took me a while to center the div using margins i had to go back to my learning materials to remember

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

styling

Code

Please log in to post a comment

Community feedback

Aakash Verma•9,500
@skyv26
Posted 6 months ago
Hi @Lufredade,

👍 Great job on your project! Here are a couple of suggestions to help improve it:
1. Image path issue: It seems like the image isn't showing because you missed adding the period (.) before the image path. Since GitHub Pages uses absolute paths, make sure your image path looks like this:
```
<img src="./image-qr-code.png" alt="QR code">
```
This should solve the problem and display the image correctly. 📸
1. Card width styling: Your card has a fixed width, which works, but you can simplify your CSS and make it more responsive by using max-width instead of a fixed width. Here's an updated version of your card styling:
```
.card {
    margin: 1rem auto;
    background-color: white;
    border-radius: 10px;
    max-width: 330px;
    height: auto;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
```
With this, you can remove the width definition from your media queries, making the layout more flexible across different screen sizes. 📱

Keep up the great work! You’re on the right track! 🚀

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