Latest solutions
Web Ninja 101 | Tip Calculator w/ Vue 3 & TailwindCSS
#accessibility#gsap#tailwind-css#vueSubmitted almost 4 years ago
Latest comments
- @FrederikDiamonD@NDOY3M4N
Hi there. Great work on this challenge. I think you used the features (nesting mostly) correctly. Now there are some things in the design that you forgot.
On mobile, because of the
height: 100vh
on themain
the content is not showing properly. To fix this issue, you could replace that property withmin-height: 100vh
so that themain
will only fill up the minimum space needed.You could also add some vertical padding on mobile.
Happy coding 🎉️
Marked as helpful - @wyliemickelson@NDOY3M4N
Wonderful 😍️😍️😍️.
You just need to fix:
- on
1366x750
screen, the modal is not showing properly (the close button is off the page), you could reduce the size of the carousel to accommodate for that. - on desktop, when hovering on the links the whole navbar is slightly moving. You could add the border with a transparent color on the default state, when in hover state you just change the color of the border.
- you could also allow the users to open the navbar on mobile
Happy coding 🎉️
- on
- @uspaz@NDOY3M4N
Nice job on this challenge. On mobile you could replace the
height: 100vh
tomin-height: 100vh
on thecontainer
class. You could also add some vertical padding on mobile. Other than that I think everything is okay. @Lucas feedback is also great. I use a similar technique when doing this challenge. Happy coding 🎉️Marked as helpful - @mcdulingm@NDOY3M4N
Hi, great work on this challenge. There are just some things that need fixing like:
- on mobile the padding is not applied to the screen since you set
height: 100vh
on the main. You could fix this by just replacing it withmin-height: 100vh
. - on mobile you could also increase the padding (like in the design)
- on line 37 (
index.html
) there is a typo, the closing tag should bea
instead ofbutton
.
Happy coding 🎉️
Marked as helpful - on mobile the padding is not applied to the screen since you set
- @MJ1001@NDOY3M4N
You could add a
max-width
to thecontainer
class to sort-of constraint the width on mobile display. Great work - @imjackfrost1997@NDOY3M4N
congrats, that's a super nice reproduction of the design. Keep at it!