Product Preview Card using CSS media query

Community feedback

• 

  Hassia Issah•50,650

  @HassiaiPosted almost 2 years ago

  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

  Marked as helpful

  1

  ---

  

  P

  Kal•40

  @AnalystKALPosted almost 2 years ago

  @Hassiai I fixed the accessibility issues that you had pointed out.

  Thank you so much for your feedback. I have learnt a lot from your post and have started to implement them in my new challenges.

  1
• 

  Ambe Mbong-Nwi Nchang•550

  @Ambe-Mbong-NwiPosted almost 2 years ago

  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.

  Marked as helpful

  1

  ---

  

  P

  Kal•40

  @AnalystKALPosted almost 2 years ago

  @Ambe-Mbong-Nwi

  With your great explanations about media queries, I was able to apply your feedback in new challenges that I have attempted. I will possibly start this challenge from scratch.

  Thank you so much for your feedback.

  0

  

  Ambe Mbong-Nwi Nchang•550

  @Ambe-Mbong-NwiPosted almost 2 years ago

  @AnalystKAL You are welcome. Glad I could be of help.

  0