Latest solutions
React app to search/bookmark movies/tv shows from API
#axios#react#tailwind-css#viteSubmitted 8 months agoResponsive app with ui animations and localstorage
#react#sass/scss#animationSubmitted about 2 years ago
Latest comments
- @Mus3b3bdo@abhay8696
Hey musab, you've given very nice try up here. It seems you have very good skills in css. For validations, using java-script conditional statements would be a better approach, and also using them with use-state can be useful. Or for simpler approach you can also add 'required' in html element.
You can use use-state hooks for storing values in form inputs and display them on cards.
Since we need to maintain aspect ratio of card images , use px (instead of % and rem) for setting width and height. Change these values with different screen sizes.
Hope this helps. Thank You :)
Marked as helpful - @Jacwilalasey@abhay8696
Hey @Jacwilalasey, You need only one div in body element. And to keep that div in center of page, use flexbox as shown below: body{ height: 100vh; display: flex; align-items: center; justify-content: center; } This will keep your content in center always. And for the image size issue, keep its max-width to 100%.
Hope this helps, thank you.
Marked as helpful - @Odalloc@abhay8696
Hey @Odalloc, great work you have did here. I've used flexbox to give proper spacing to the contents of the cards. Here's what I did to card div: display: flex; flex-direction: column; align-items: flex-start; justify-content: space-evenly;
You can also add "role = 'main' " attribute in section element to resolve accessibility issue.
Marked as helpful