Product preview card component

Community feedback

• 

  Hugo Sanchez•270

  @HunigoleSanPosted 10 months ago

  Third Tip: Fixed Measurements or Pixels

  I noticed that your classes ".container", ".description", "#description", and "button" use a width property in pixels. While this isn't inherently bad, it's essential to understand its implications. While percentage measurements are often touted as superior, there are scenarios where pixels are more suitable. However, for mobile devices, using pixel measurements can be problematic.

  Consider learning about percentage measurements, and in this scenario, transitioning to percentage-based widths may be beneficial. Don't forget to add "padding: 2rem" to the body tag. However, be cautious as making these changes abruptly may break your existing code. Additionally, mastering the correct usage of "display: flex" can greatly improve your layout.

  Fourth Tip: File Paths

  If your image works locally but not when uploaded to a website, it may be due to incorrect file paths. Ensure that your file paths are correct, especially in the background-image property. Instead of "/images/image-product-mobile.jpg",

  use "../images/image-product-mobile.jpg" to adjust the path correctly.

  Congratulations on your progress in web development! Remember, success in this field requires consistent practice and patience. Keep practicing, and you'll become a better developer over time. Feel free to rate my assistance, and don't hesitate to reach out if you need further help. Until next time! 🚀✨

  Marked as helpful

  1

  ---

  

  Gustavo Machado•30

  @Guga-tabPosted 10 months ago

  @HunigoleSan Thank you for your help, I will put your tips into practice, thank you very much... besides, I would like to start entering this market as a freelancer, what tips could you share with me.

  1

  

  Hugo Sanchez•270

  @HunigoleSanPosted 10 months ago

  @Guga-tab Hello friend, it's a pleasure to help! 😊 I invite you to visit my profile where I've just completed this same challenge. It may give you a new perspective on code. Regarding entering as a "freelancer," I'm just starting in that world. However, I have a lot of experience in UX/UI design Figma, CSS-Flex-Grid, animations, and JavaScript. While I've had a couple of clients so far, I'm still learning and growing in this field. I'll gladly share what I know, and I hope it helps you on your journey! 🚀✨ Success on your path! 🌟 Prepare, and fight for your goals! 💪🚀

  Marked as helpful

  1
• 

  Hugo Sanchez•270

  @HunigoleSanPosted 10 months ago

  Second Tip: Media Queries

  You're using media queries to adjust the ".container" for PC devices, which is fine. However, some issues arise when resizing beyond 1440 pixels in width, causing it to revert to mobile device settings. This is because you've used the "FIRTSMOBILE" code, which is not incorrect, but I recommend removing a parameter from your media query:

  🖥️ Current Media Query:

  css @media (min-width: 900px) and (max-width: 1440px)

  🔍 Recommended Adjustment:

  css @media (min-width: 900px)

  This indicates a range from minimum to maximum. By leaving it undefined, all elements intended for PC screens will retain those changes. There's no need to add unless you're making other changes for a different theme, but for this challenge, it's unnecessary.

  Removing the (max-width: 1440px) range will prevent your classes from reverting to the "firsts mobile" state, thus avoiding code breakage. My suggestion is to eliminate that range.

  Marked as helpful

  1
• 

  Hugo Sanchez•270

  @HunigoleSanPosted 10 months ago

  Hello @Guga-tab! 👋 You've done a good job with your current knowledge. I'm here to help you improve your responsive design and CSS logic. Let's break it down into individual posts to keep it concise.

  First, let's address an important detail in your ".container" class. You're using embedded margin, which is expressed in percentages. While this can be effective with advanced mathematics, it's often cumbersome. Instead, consider a simpler approach for centering elements.

  I suggest removing the margin and adding a class to your "body". Give it properties like display: flex, justify-content: center, align-items: center, min-height: 100vh.

  🔍 What will these codes do in the body tag?

  These properties will center all child elements within the body tag, adapting them for various devices.

  justify-content: center (centers elements along the horizontal axis) align-items: center (centers elements along the vertical axis) min-height: 100vh (ensures the body tag takes up the entire viewport height)

  This approach offers practicality and adaptability for different screen sizes.

  Marked as helpful

  1