how to make the text have multiple short lines instead of one long line.
Latest solutions
- Submitted 2 days ago
Four card feature section - Flexbox
- HTML
- CSS
I’d love to know how to make the cards the same size across different devices, I used max-width and max-height but one of the cards has a different height.
Also, I usually design in px first and then convert the measurements to rem— is there a better practice for this?
I’d also love to know how you decide when to use Flexbox or Grid. In this case, I used Flexbox, but I could have used Grid too.
Any suggestions on how to improve my code are welcome!
- Submitted 5 days ago
Product Preview Card - Responsive layout
- HTML
- CSS
I would appreciate help with improving the accessibility of the project. While the card looks great and works on most devices, I'm not sure if it's fully accessible for users who rely on screen readers or keyboard navigation. I’d love feedback on how to improve things like ARIA roles and attributes. Additionally, any tips on optimizing my CSS for even cleaner code would be appreciated!
- Submitted 10 days ago
Recipe page using CSS and HTML
- HTML
- CSS
I’d love feedback on how I can improve responsiveness, especially with media queries. Also, any suggestions on how to make my CSS more efficient and scalable would be super helpful!
- Submitted 12 days ago
Social links profile - CSS, HTML, Responsive
#semantic-ui- HTML
- CSS
Any improvement suggestions are welcome!
- Submitted 13 days ago
Blog Preview Card - First time using Builder.io
- HTML
- CSS
I’d love feedback on how to improve the readability and maintainability of the generated code. Also, any suggestions on best practices for using Builder.io effectively while keeping performance and accessibility in mind would be helpful.
Latest comments
- @besher94Submitted 3 days agoWhat specific areas of your project would you like help with?P@angie-createPosted 2 days ago
Hi! If the text is stretching too wide, you can control the line length by setting a max-width on the text container, this ensures the text wraps automatically instead of spanning the full width.
Marked as helpful0 - @JohnPanagosSubmitted 5 days agoWhat are you most proud of, and what would you do differently next time?
I used Cursor.AI to help me code this image and it streamlined the process for me!
What challenges did you encounter, and how did you overcome them?I initially wasn't sure how to start, but by using AI to fix or change things for me it was really easy.
What specific areas of your project would you like help with?N.A.
P@angie-createPosted 5 days agoGreat work on the Product Preview Card!
The design is clean, modern, and intuitive, with excellent responsiveness across devices. I love how the layout adapts to different screen sizes, and your use of Flexbox makes the card look great everywhere.
What’s great:
Design & Layout: Simple, clear, and effective. The hierarchy is easy to follow. Responsiveness: The card scales perfectly, which is crucial. Semantic HTML: Nice use of accessible elements for a better user experience.
Great job!
0 - @4-WalkerSubmitted 10 days agoWhat are you most proud of, and what would you do differently next time?
I'm proud of getting my head around pseudo selectors. I've found them a bit scary but I think I found good use of them in this challenge.
What challenges did you encounter, and how did you overcome them?I had some troubles with vh sizing but it was a simple fix of changing my vh property to min-height instead of just height.
What specific areas of your project would you like help with?I definitely have a lot of redundant CSS. My workflow for this project was really weird and led me to designing each section one by one instead of finding matching elements. Also always looking for feedback on responsive design.
P@angie-createPosted 10 days agoGreat job on completing the Recipe Page Challenge! Here are some highlights and areas for improvement:
Good semantic HTML – Using proper elements like <section> and <article> improves accessibility. Nice layout & typography – The design stays clean and visually appealing. Responsive design – The page adjusts well on different screen sizes.
Suggestions for improvement:
Consider optimizing the use of margin and padding to keep spacing consistent. Using rem or em instead of px would improve accessibility and scalability.
Overall, it's a great effort! Keep up the good work and happy coding!
Marked as helpful0 - @ayamelloSubmitted 12 months agoP@angie-createPosted 12 days ago
Great job on your Social Links Profile project! 🎉 Here are some highlights and suggestions for improvement:
Clean & well-structured code – Your HTML and CSS are easy to read and follow. Good responsiveness – The layout adapts well to different screen sizes. Nice use of flexbox/grid – Helps maintain a consistent and centered layout.
💡 Suggestions for improvement:
- Adding subtle hover effects to the social links could (to make them green as the prototype example)
- Adding google Fonts, so it match with the original design.
- Check for any unnecessary repetition in CSS to make the code more concise.
Overall, it’s a solid implementation! Keep up the great work! 🚀
0 - @KeBartekSubmitted 13 days agoWhat are you most proud of, and what would you do differently next time?
I am proud of the fact that I managed to handle it quickly and completely on my own.
What challenges did you encounter, and how did you overcome them?the only problem was that at first changing the text color didn't work for me, but instead of h2 I entered h3, so it was just my oversight.
What specific areas of your project would you like help with?I would like to know if there are things I could have done better or in a more optimal way.
P@angie-createPosted 13 days agoGreat job on completing this project! Here are a few points of feedback:
Good structure & readability – Your HTML and CSS are well-organized, making it easy to follow. Solid responsiveness – The layout adapts well to different screen sizes.
Suggestions for improvement:
Consider using rem or em instead of px for better scalability and accessibility.
0 - @mohammed1215Submitted 13 days agoP@angie-createPosted 13 days ago
Overall Impression: Great job on the QR Code component! The layout is clean, and the design is accurate. The implementation works well across different screen sizes.
Strengths: Responsive Design: The component adjusts nicely on mobile, tablet, and desktop. Code Organization: The HTML and CSS are clear and easy to follow. Styling: Good attention to spacing, font sizes, and color choices.
Great job!
Marked as helpful1