QR code solution using technologies of HTML and CSS

Hi @HalalisaniSibisi 👋

Great job on completing the challenge. Your solution looks wonderful. I love how you centered the div too.

I have some tips which may be of help to you.

• I suggest wrapping the container with a main tag, or a div. This will come in handy when centering the div. For example:

if you wrap the container with the main tag, centering the div will be something like this:

main {
display: flex;
align-items: center;
justify-content: center;
min-height; 100dvh;
}

You can use the grid or the position methods to center the div too, but I recommend the grid or the flex method because they're easier to work with.

• I also noticed that you forgot to add a semi-colon(;) after importing the fonts. This is probably affecting the asterix/general element selector. Also, set the box-sizing: border-box; in your general selector. With this set, the element's total width and height will include the content, padding, and border, all in one box. This should help with the margin and padding issues

• By implementing the box-sizing: border-box, the issue with responsiveness will probably get fixed since you set the container max-width: 300px.

Also, I appreciate how you clearly stated areas in which you needed assistance. Thank you very much for doing that. It helps a lot☺️

I recently did a video in which I solved this challenge. You can check out my solution here @KimDoesCode. Please subscribe😅 if it helps you out 🫠

Good luck on your coding journey 👋☺️

Hi 👋

Just a note regarding the smaller viewports. There seems to be an issue with hard-coded width values on the container set at viewports smaller than 375px. One for 370px and one for 1440px. This is causing the content to overflow at smaller viewports.

A common approach for dealing with this would be to set a width using % values, and then setting a max-width for larger viewports. For example:

.container {
    width: 90%;
    max-width: 370px;
}

Hope this helps 😁

Hello @HalalisaniSibisi!

Your project looks great!

I have one suggestion for you to improve it even more:

Using margin is not the best option to center an element. Here's a very efficient (and better) way to place an element in the middle of the page both vertically and horizontally:

📌 Apply this to the body (in order to work properly, don't use position or margins):

body {
    min-height: 100vh;
    display: flex; 
    justify-content: center;
    align-items: center;
}

I hope it helps!

Happy Coding ...