Product preview card using html5 markup CSS custom properties Flexbox

Community feedback

• 

  Hassia Issah•50,670

  @HassiaiPosted almost 2 years ago

  Replace the height value in the body with 100vh height:100vh; There is no need for position:relative in .intro Change the height value of .intro to auto. declare display:flex in . intro give .text a width of 50% instead of position absolute and its properties.

  Give . text a padding value for all the sides instead giving h1 and p a width value Give . price display: flex; align-items: center; to center the canceled price instead of position: relative: and giving .old-price position: absolute and its properties. You forgot to add a media query for the mobile design.

  Hope am helpful.

  Well done for completing this challenge. HAPPY CODING

  Marked as helpful

  0

  ---

  

  Noah Olamilekan•30

  @Noah2509Posted almost 2 years ago

  @Hassiai

  Thanks for the correction, it's really helpful

  But I noticed after I made all the corrections. if you notice the .price, it has more space at the top than at the bottom which does not make the design look more nicely

  I tried setting the margin and the padding but nothing changed. what could have been the reason, sir??

  0

  

  Noah Olamilekan•30

  @Noah2509Posted almost 2 years ago

  @Hassiai

  And by the way, I'm really confused why is it that on my browser here the design looks normal as it should be but when it comes to the screenshot they generate here it brings something else.

  The screenshot here is the same as it is on firefox, which I'm using Chrome as my own browser

  0
• 

  Eileen dangelo•1,600

  @EileenpkPosted almost 2 years ago

  Hi Noah! your project looks great. When you say div, do you mean your <main></main> tag? If so, it's not vertically aligned because you have the height set to 800px on your CSS body selector. To center the <main></main> tag just change the CSS to this.

     body {
      background-color: hsl(30, 38%, 92%);
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100vw;
      width:100vw;
   }
  
  

  This sets the height to 100% of whatever the view height is for the device or screen that is viewing the component. If you have trouble horizontally centering something just remember, where is the center of something if we don't know how wide it is? Setting the width of the parent container lets the browser know where to put the element you are trying to center.

  If you found this helpful please mark it as such :) Let's connect on LinkedIn! www.linkedin.com/in/eileen-dangelo

  Marked as helpful

  0

  ---

  

  Noah Olamilekan•30

  @Noah2509Posted almost 2 years ago

  @Eileenpk

  Thanks so much, ma,

  But what I'm asking is, do I need to give my <main> height before it could be set to center vertically and horizontally

  0

  

  Eileen dangelo•1,600

  @EileenpkPosted almost 2 years ago

  @Noah2509 The short answer is no. The longer answer is...

  In order to use the align-items and justify-content properties in a flex container, you do not need to set the height and width of the parent container. These properties can be used to align and distribute the flex items within the flex container, regardless of the size of the container.

  Here is an example of using the align-items and justify-content properties to center a single flex item within a flex container:

  .container {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .item {
    /* flex item styles */
  }
  
  

  In this example, the align-items property is used to vertically align the flex item, and the justify-content property is used to horizontally align the flex item.

  It's worth noting that the size of the flex container will determine the available space for the flex items. So if you want the flex items to be centered within the container and also be a specific size, you may need to set the height and width of the container.

  I hope this helps! Let me know if you have any other questions.

  Marked as helpful

  0

  

  Noah Olamilekan•30

  @Noah2509Posted almost 2 years ago

  @Eileenpk

  yes thank you ma, that's why I ask the question because when I set mine it doesn't centered within not until I gave the <main> height which i don't know the problem

  0