@Hassiai
Posted
Replace <h3> and <h5> with <p> to fix the accessibility issue.
To center .container on the page using flexbox or grid,
- USING FLEXBOX: add min-height:100vh; display: flex; align-items: center: justify-content: center; to the body
body{
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
- USING GRID: Add min-height:100vh; display: grid place-items: center to the body
body{
min-height: 100vh;
display: grid;
place-items: center;
}
For a responsive content, replace the width in .product preview with max-width and there is no need to give .product-preview and the img a height value rather give .product features a padding value for all the sides, this will prevent the content from overflowing.
in the desktop design, give .product image and product features a width of 50% and the img a width of 100% in the media query give them a width of 100%.
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
