@HunigoleSan
Posted
Hello @thaisavieira! 🌟 You're on the right track. Remember, continuous practice makes you a better developer. To solve the issue you're facing, you only need three lines of code:
ul {
list-style: none;
width: 100%;
display: flex;
justify-content: space-around;
}
With this, you'll fix the problem you're encountering.
Now, let's discuss some recommendations to avoid bad practices.
First tip: Height 📏
The ".card" class is using a fixed measurement for the "heigh"t property. This could lead to issues as you add more child elements. It's best to avoid fixed measurements and let child elements naturally expand within the parent container.
Second tip: Width 📐
The ".card" class is using a fixed measurement for the "width" property, which might be suitable for mobile devices. However, for best practices, you could use the "padding-30px" property to increase the container size and simulate the appropriate width. Although, using a fixed measurement isn't necessarily wrong in this case.
Third tip: Responsive 📱
While you're not yet applying responsive design, you can make the ".card" class use a percentage instead of a fixed measurement for width. For example, "width: 95%". This will make the container fluid and adaptable to any type of mobile device with a screen width less than 415px.
I hope this little feedback has been able to help you in your professional development. 🌟 If you found it useful, feel free to rate it! Keep up the great work! 👍
Marked as helpful
@thaisavieira
Posted
Hello, @HunigoleSan! Thank you a lot! I applied the UL proprieties and it did solve my issue very well, but much more important than that I loved your tips. About the fixed measurement, it was always a doubt to me, causing some insecurities when I was starting a new practice project. I'm sure I'll keep these tips in my mind for my next studies. Keep inspiring and helping others!
