@Nasifuad
Latest solutions
I am proud of learning how to use grid css to make responsive layout
#react#tailwind-cssSubmitted about 2 months agoI think , it's still little bit larger from the actual desgin, but I was unable to reduce its size. I just get stuck in reducing the size of design, but if I try to do so, the content overflowed or it reaches to another page as I reduce its width or reduce its height respectively.
Four Card Section using grid and flex-box
#react#tailwind-cssSubmitted 2 months agoI want to know if there any styles through which I can break the paragraph into desired amount of line, like by default if a paragraph is taking 2 lines but I want it in 4 lines for desgin purpose. I just know a way that is fixing the width. Is there any other way?? Please tell if any.
Product Preview Card
#react#tailwind-cssSubmitted 2 months agoSometimes I still get confused on flex property, I really need to focus when applying styles. Is there any perfect , golden resources where I can clear my confusion? ... 🤔🤔
Recipe Page using Tailwind CSS
#react#tailwind-cssSubmitted 2 months agoUsing media query and screen breakpoint in tailwind css.
Responsive nft-preview card using basic css and react.
#reactSubmitted 2 months agoNone, I was able to complete it all by myself.
Latest comments
- @viv2711
Well done using grid to design the section. But I think you just need some lessons on grid so that you can control the size of each card within a grid section. Search on youtube, there are really awesome videos (<10mins).
- P@NarelaCamaraWhat are you most proud of, and what would you do differently next time?
I proud to use grid because I usually dont use this. In the next time I want to try to use motion or some to animate the changes of position of the cards.
What challenges did you encounter, and how did you overcome them?The most challenge I found was use motion and try to animate the moviment of the boxs. I decide not use this for now.
What specific areas of your project would you like help with?I would like recomendations for the transitions.
@viv2711Well done using the grid property 🎉🎉🎉🎉. I just want to bring your attention towards your design, and that is I can scroll thorugh it, because your cards are somewhat large. You can fix it by not using pixels for setting the width instead use 'em' or '%' units as it is relative to its parent element.
Marked as helpful - @Sa3d000nWhat are you most proud of, and what would you do differently next time?
handling images
What challenges did you encounter, and how did you overcome them?handling images
What specific areas of your project would you like help with?handling images
@viv2711Almost same but I think you know that there are some major issues with the design. The overall width of design is perfect but width of image and content should be same. To get rounded borders around the image in your desgin you can
{overflow: hidden}on parent element of the image. Also there are some formatting of the name and desc of product can also be done by fixing their widths. - @KpG782What are you most proud of, and what would you do differently next time?
I'm proud that I've been able to idenityf the right usage like table, list for each section.
What challenges did you encounter, and how did you overcome them?I have hard time with the responsive layout especially for mobile and I still dont have no idea on how to make it not scrollable in website since the size is too long but I tried experimenting with it and this is the results.
What specific areas of your project would you like help with?I need help with the responsive layout, like the card should be in the middle and not scrollable in the website and in the font text responsiveness although I have an idea using font clamp, should I make it with this projects too? oh also I have issues with the number list-decimals, how can I change the format of that to bold? Thanks for your suggestions.
@viv2711You can change the color and style of decimals using marker pseudo-element.
ul li::marker { color: red; font-size: 1.5em; font-weight: 700; }To middle the card component you can use in parent container/ body according to your card's position:
body { display: flex; align-items: center; justify-content: center; min-height: 100vh; }And, I think we can not make it un-scrollable. I am not sure too.
Marked as helpful - P@BlonoBuccellatiWhat are you most proud of, and what would you do differently next time?
- use
groupandgroup-activefrom Tailwind CSS to style child components based on the :active state of their parent.
- Please share any feedback or improvement suggestions regarding overall component design or CSS.
@viv2711It's almost same. Tell me the dimensions you have taken for the card. Mine looks smaller every time.
- use
- @ShivaShaknrWhat are you most proud of, and what would you do differently next time?
🎉 What I'm most proud of: I'm most proud of the creativity and effort I put into designing my social media profile card. It reflects my personality and showcases my skills effectively. I'm also proud of the positive feedback I've received from others who have seen it.
🔄 What I would do differently next time: Next time, I would focus on refining the design even further to make it even more visually appealing and user-friendly. Additionally, I would explore new techniques or tools to add more dynamic elements to the card and make it stand out even more in the crowded world of social media.
What challenges did you encounter, and how did you overcome them?⚠️ Challenges Encountered:
- Design limitations: Balancing creativity and practicality within the constraints of the social media platform's design guidelines.
- Content organization: Ensuring all important information is included without cluttering the layout.
🛠️ How I Overcame Them:
- Research: Studied platform design specifications and analyzed successful profile cards for inspiration.
- Iterative Design: Experimented with layouts and content placement through multiple iterations until achieving the desired balance.
- Design Feedback 🎨: I would appreciate feedback on the layout, color palette, and overall visual appeal of my social media profile card.
- Content Review 📝: I'm looking for suggestions on how to effectively present information on my profile card, ensuring it is clear, concise, and engaging.
@viv2711Your socials have default borders. You can remove them by
{boder: 1px solid black}. Just some margin and padding issues. Rest is good.
