I'm still having problem in matching the design using tailwind css
I would like help on good practice usage of react framework and tailwindcss framework
How to do responsiveness especially on width in such a way when decreasing the size of browser the cards and site decrease also proportionally.
Also i would like help on good way of achieving the layout, i used position relative with absolute in the activity cards but it was very difficult when it came to mobile version.
Finally any suggestion on how to learn react and styling in react will be much appreciated
I would like help in following areas
Working on mobile version, the top image was clipped i don't why mostly it occurs when i set align-items to center but even when i removed it nothing changed.
On switching the pages when success validation, i wanted to use classList but i found it didn't work efficiently so i decided to write the style directly.
Setting the height of container(the whole content) and body given the desktop and mobile design have different sizes. Mostly i set the body and container height on desktop and mobile separately using @media but i don't think it is good practice
I'm proud of using react and tailwindcss frameworks for the first time to build a project
What specific areas of your project would you like help with?I would like help on good practice usage of react framework and tailwindcss framework
I would like help in centering the form before using tailwind css with normal css i always used flex in body to center html,body{ width: 100%; height: 100%; } body{ display: flex; justify-content: center; align-items: center; }
it seems to not work, i guess tailwindcss might be overiding the styles
Hello @vedantagrawal524
Congratulation on completing the challenge. I liked the way you placed those background icons, I will try to update mine also.
Just a simple thing, in previous paragraph you forgot to add the respective duration either week or month
Wish you happy coding journey
Hello David Mwalimu Congratulation on completing the challenge🙌🙌, i liked the way you used classList toggle to change the page. I changed display property directly, i will use that method next time.
Some few modification i noticed The success card is not at center, you can use flex display to center it. You also forget to change the email on success component based on the email filled on the field.
I wish you all the best on your coding journey.💪💪
Hi congratulation on completing the challenge, some few improvements i could see You can adjust the top and right position of .social-icons to position it close to the share icon
I liked the way you used conditions to toggle the social-icons. You can also try using classList to toggle it too, i think it is good too. btnEl.addEventListener("click", function(){ socialIcons.classList.toogle('active'); })
I wish you all the best on your coding journey. Happy coding💪
if you can give me feedback or suggestion. please give it'll help me improve.
Hello @bhuvi819381,
Congratulations on completing the challenge! 🎉
A small suggestion: adding a box-shadow to the cards would enhance the design by giving the cards more depth.
All the best on your coding journey—keep up the great work! 👍
Congratulation on completing the challenge, only some few comments to make it more better. Adding some border-radius around the containers The background color of the leftmost container is white
I wish you all the best on coding journey
