Preview Card with HTML and CSS Flexbox / Desktop Version

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted almost 2 years ago

  Hello again 👋. Good job on completing the challenge !

  I have another option to create two columns.

  • Another way to create two columns in CSS is to use the grid layout 📐. Using the grid layout, you can create two columns by setting the display property of the parent element to grid and then defining the number of columns you want with the grid-template-columns property.

    Example:

    <div class="container">
      <div>Column 1</div>
      <div>Column 2</div>
    </div>
    
    .container {
      display: grid;
      grid-template-columns: repeat(2, 1fr) /*  Creates two columns with equal width  */
    }
    

  I hope you find it useful! 😄

  Happy coding!

  Marked as helpful

  1
• 

  Gift Richard•520

  @fibonacci001Posted almost 2 years ago

  hi windowpi, A common and effective way to implement a product card with an image on the left and text on the right is by using CSS flexbox. With CSS flexbox, you can easily create a flexible container for the card, set the direction of the items (i.e., image and text), and align them as desired.

  ok.... take this as an example

  HTML

  <div class="product-card"> <img src="product-image.jpg" alt="Product Image"> <div class="product-info"> <h3>Product Name</h3> <p>Product description goes here</p> </div> </div> CSS .product-card { display: flex; flex-direction: row; }

  .product-info { padding: 10px; text-align: left; } With this example code, the image and the product info will be displayed side-by-side in a row, with the product info having a padding of 10 pixels and left-aligned text. hope this was some kind of help to you.

  Marked as helpful

  1
• 

  Hassia Issah•50,650

  @HassiaiPosted almost 2 years ago

  To center .container on the page using flexbox, replace the height in the body with min-height: 100vh.

  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

  You forgot to add a media query for the mobile design, in the media query, reduce the max-width of .container give the img and .content a width of 100% and give .container s flex-direction: column

  Hope am helpful.

  Well done for completing this challenge. HAPPY CODING

  Marked as helpful

  0