@TaylorC19
Latest solutions
AudioPhile Ecommerce Website using Next.js and Redux
#accessibility#next#redux-toolkitSubmitted over 1 year agoDesigno multi-page website
#next#react#sass/scss#typescript#accessibilitySubmitted almost 2 years ago
Latest comments
- @karishma-dev
Hi, you did a great job on this challenge! To remove the border effect just add
border:0in your.btnclass. To remove the border effect from the 5 rating buttons, you can add this in your css file:.btn.active:focus, .btn.show:focus, .btn:active:focus{ border: 0; box-shadow: 0 0; }You can find these fixes by seeing the styling in dev tools. Yeah, I think flexbox is a good and easy way to space out the buttons.Hope this helps! :)
Marked as helpful - @aszcoding@karishma-dev
Hey, your solution looks good. Few suggestions:
- You haven't closed the link tag for importing the stylesheet, due to which you are having some HTML issues.
- Provide alternate text for images so if a person using accessible technologies or due to some reason cannot see the image, they will know what the image is about by reading this text.
- Your card is not properly centered. Add
display: flex; justify-content: space-between; align-items: center; flex-direction: column; min-height: 100vh;to the body. In this, justify-content will make sure there is some space between your elements and align-items will align the content to the center. Removemin-height: 100vhfrom your main tag, as it's causing the browser to have a scrollbar. - Add your "Frontend Mentor | QR code component" text in a tag, and add some margin-top to it. Also, add some margin-bottom in your footer so there is some space between the footer and the end of the page. (This will make the design of your page look better).
Hope this helps! :)
Marked as helpful - @IFafaa@karishma-dev
Hey, your solution looks good! I noticed something that at some widths your attribution and main content heading are overlapping. To fix this you could set your
height: 93vhtoheight: 100vhin the#general_containerelement, and add some bottom padding in the body element so your main content and the end of the page would have some space between them.Hope this helps! :)
Marked as helpful - @ExiviuZ@karishma-dev
Hey, You have done great work!! I especially liked the way you have made the CSS cross-browser compatible.
Awesome Work!!
- @Ambrolla@karishma-dev
Hi, your solution looks good. Few suggestions:
- Your card is not properly aligned to the center of the page and also the button is not properly aligned. You can center the card by adding
display: flex; justify-content: center; align-items: center; min-height: 100vh;to the body. In this, justify-content will align the content to the center of the main axis and align-items will align the content to the center of the cross-axis (perpendicular to the main axis). Also, remove the margin from the card and footer for this to properly work, and for the button alignment you can useposition absolute; left: 50%; transform: translate(-50%);and addposition-relativeto the wrapper class. I think you need to learn more about the position and centering the div. Hope this freecodecamp article will help you: here - Your HTML code also contains more than one meta tag for charset.
For deploying the react app on Github, I mostly follow this article.
Marked as helpful - Your card is not properly aligned to the center of the page and also the button is not properly aligned. You can center the card by adding
- @Adil-Rafiq@karishma-dev
Hey, your solution looks good. Few suggestions:
- Make your container as the main tag instead of div, this should help you solve your accessibility issues.
- And for the alignment of elements issue that you are facing, I used flex in my solution. Add flex in your
leftandrightclass, and also the class that contains both of these classes.
Hope this helps you!
Marked as helpful
