Responsive landing page using flexbox

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted almost 2 years ago

  Hello there 👋. Good job on completing the challenge !

  I have other suggestions about your code that might interest you.

  • You can use the <picture> tag when you have different versions of the same image 🖼. Using the <picture> tag will help you to load the correct image for the user's device. You can read more about this here 📘.

  • The alt attribute is used to provide a text description of the image which is useful for screen reader users, assistive technology users, and search engine optimization. Add the alt attribute to the <img> tag of the product.

  • Using too many selectors or too many level nesting in SASS can make your code more difficult to read and maintain. Additionally, using too many selectors can lead to specificity issues, making it difficult to override existing styles.

    body .description .prices .promo-price { . . . }
    

    You can use BEM naming convention to keep only one level of nesting in SASS. BEM (Block Element Modifier) is a popular naming convention for CSS classes that helps developers better organize their code.

    You can read more about this here: BEM and SASS a perfect match

  I hope you find it useful! 😄 Above all, the solution you submitted is great!

  Happy coding!

  Marked as helpful

  1
• 

  Hassia Issah•50,650

  @HassiaiPosted almost 2 years ago

  Replace <div id="container" class="container"> with the main tag to fix the accessibility issue. click here for more on web-accessibility and semantic html

  There is no need to give the body a max-width value. To center .container on the page using flexbox, replace the height in the body with min-height: 100vh.

  There is no need to give .container a height value, rather give .description a padding value for all the sides and give the img a width and height of 100%.

  in the desktop design give .box-img and .description a width of 50% and width of 100% in the mobile design.

  Use relative units like rem or em as unit for the padding, margin, width values and preferably rem for the font-size values, instead of using px which is an absolute unit. For more on CSS units Click here

  Hope am helpful.

  Well done for completing this challenge. HAPPY CODING

  Marked as helpful

  1