Product preview card component

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! 🚀✨

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.

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.