Product Preview Card using CSS media query

Replace <div class="flex-content"> with the main tag, <div class="product-type"> with<p>, <div class="product-name"> with <h1> and <div class="product-description"> with <p> to fix the accessibility issues. click here for more on web-accessibility and semantic html

There is no need to give flex-body a height of 100% that is its default value. To center. flex-content on the page using flexbox add min-height: 100vh to the body. there is no need for max-height in product-img.

There is no need to give .flex-content a height value give . product-content a padding value for all the sides. this will be a good replace the height value in .flex-content and max- height in .product-content.

There is no need to restyle the flex-body in the media query, its styling will take effect without is being redeclared again. If there is a thin line below the image use: display: block;

To seperat between two flex-items you can use gap e.g: gap: 20px and in grid you use grid-gap for the space between grid-items both vertically and horizontally or column-gap for the space between to columns of grid-items or row-gap for the column between the rows of grid-items.

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

Nice job. Media queries help you to define different style rules for different device widths like phones and laptops.

max-width changes the background color to blue if the viewport is 375 pixels wide or smaller

@media (max-width: 375px){
    body{
    background-color: blue;
  }
}

min-width changes the background color to lightgreen if the viewport is 376 pixels wide or wider

@media (min-width: 376px){
    body{
    background-color: lightgreen;
  }
}

See more information using this link @media rule in our CSS reference

• Taking the desktop-first approach as an example here, define your desktop styles and set the width in the body or use a media query with max-width: 1440px.
• If, you wish to add changes to the styles of different screen sizes between the desktop and mobile screens, add a media query that targets that range.

Example

@media (min-width: 769px) and (max-width: 1000px) 

• Lastly, include a media query with max-width 375px(mobile width) so you can then define your mobile styles below.

Sections can be separated using either grid or flexbox in different situations.

CSS GRID is a more powerful system compared to Flexbox, using a two-dimensional layout system allowing users to lay out content in rows and columns. I tend to use them both - Grid for building mainframe and general layout blocks and Flexbox for everything inside those blocks.