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

QR code css problem solution

molLbach 30

@molLbach

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


The code is easy overall, it's obviously targeted at people who are learning css/html, the only difficulty lies on centering the div and playing with the box model to make things look like the design given.

Community feedback

Arkadiusz 200

@Arkadiusz-coder

Posted

Hi, congratulations with your first Frontend Mentor porject!

I have few suggestions: 1a. Your .attribution element should have valid links. "Frontend Mentor" is linked by https://www.frontendmentor.io?ref=challenge, and this is general address to the user's profile page. So when I clicked it's send me to my profile. It would be better if the link will send user to your frontendMentor profile. I suggest to replace this link with your https://www.frontendmentor.io/profile/molLbach 1b. there is no link behind your name, so I would suggest set link to your github profile, so people who want to know more about you would be send to your projects.

  1. You used h3 element for the title of the page. I guess it's because the font-size of that element where more convenient to you but it is a better practice to use title elements according to their hierarchy, so always start with h1, never skip the number and adjust font size of the element with css. Because this elements are mostly for providing some order to your code.

  2. It's also good practice to make some emantic html. So for example your .attribution element could be within <footer></footer> (and put at the bottom of the page); your .image could be within <picture></picture>; your text (h1 and p elements) within <main></main>;

I hope this will be helpful with your next projects :)

Marked as helpful

1

molLbach 30

@molLbach

Posted

@Arkadiusz-coder Thank you for the feedback, I will do as you sugested

0

@lisztomania23

Posted

Just add display: flex, flex-direction: column, and align-items: center to your body style, and yeah you have successfully centered the divs.

Also, increase the font size slightly, decrease the padding around the text a bit, and provide relative width and height to the card for better responsiveness.

I would make a pull request with changes to your repository if you'd like.

Marked as helpful

1

@lisztomania23

Posted

Hello, I've made a pull request with a few changes to your Github repo, merge it if you like.

0

molLbach 30

@molLbach

Posted

@lisztomania23 Just did thanks for the tweaks

1

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