Hello, this is my first time here. Throughout this challenge, it was difficult to position elements and set a correct dimension. Especially in the mobile version, depending on the screen size, the "Add to cart" button may disappear. If you have any feedback on how I can improve, feel free to contact me, I would love to hear your feedback. Any contribution will be really valuable to me!
Shann Timothy
@ShannTimothy22All comments
- @tainarapalmeiraSubmitted about 2 years ago@ShannTimothy22Posted about 2 years ago
Congratulation on finishing the challenge 🥳 , your solution looks great and there's no accessibility issues and html issues, I have a suggestion
• The container seems to have fixed height, it makes your content can't fit in the container you can fix that by removing the fixed height after that add some padding-bottom to your button container and the problem is fixed
If there’s still any problem I recommended you watch Kevin Powell on youtube, the channel will help you a lot on your coding journey, other than that good job on finishing the challenge and happy coding 😁!!
Marked as helpful1 - @devel0naSubmitted about 2 years ago
I have some questions:
- How can I space elements without using margin or padding property?
- How can i use a based background (like the one in this project) without forcing it into CSS?
- Is it a good practice to force sizes (img, text, etc) into a constant when it comes to mobile styling?
@ShannTimothy22Posted about 2 years agoCongratulation on finishing the challenge 🥳 , to help you with some of your question, here's some answer that I think could help :
• To give elements space without using padding and margin you can use flex or grid and use “gap” then you specify how much the space is
• If you don’t want to use css to give the body a background, the most common way is you add background image attribute inside the <body> tag
• For responsiveness styling I think it’s still okay to use forced sizes as long as you added the correct breakpoint, but there’s another way to scale elements other than forced sizes for example, you can use “clamp”, “min” or “max” for these I recommend you watch Kevin Powell on youtube, he gave a very good explanation about the topic
Another thing I want to add is It’s seems there’s some accessibility issues to help you with that you can change the container <div> to <main>, the main reason for the issue is for it’s harder for screen user to navigate the website, also for best practice every page should at least contain level-one heading <h1>, I suggest you change the word “order summary” from a <div> to <h1>
Other than that good job on finishing the challenge, I hope this helps and good luck on your coding journey 😁 !!
Marked as helpful2 - @Mohammed-Abol-FotouhSubmitted about 2 years ago
this is my solution for the QR code challenge please review my solution and tell me if there is best practice should i follow thanks in advance
@ShannTimothy22Posted about 2 years agoCongratulation on finishing the challenge 🥳 , your solution looks great and there's no accessibility issues and html issues, I have some few suggestion
• The container seems to have fixed height, it makes your content overflowing you can fix that by removing the fixed height
• It also seems there’s a few problem with some of the breakpoints (responsiveness), you can fix the problem by simply adding more breakpoint
• For the padding and margin, it’s recommended to use scaling such as rem
If there’s still any problem I recommended you watch Kevin Powell on youtube, the channel will help you a lot on your coding journey, other than that good job on finishing the challenge and happy coding 😁!!
Marked as helpful1