BLOG PREVIEW PAGE

Community feedback

• 

  Grego•1,310

  @Grego14Posted 7 months ago

  Hello! 🎉 congratulations on completing the challenge! 🎉

  I recommend removing the margin: 8px that the body element has by default, as it can cause problems in the design,

  Remove the margins you added to the .container element, as there are better ways to center it, one of them is to use 👉 Flexbox.

  The text-align: center property on the .image element is unnecessary and has no effect.

  I don't recommend using width: 70px to make the Learning button take up less width since it is causing overflows, it is better that you do something like this:

  .background-yellow{
    display: inline-block;
    margin-bottom: 0;
  }
  

  inline-block will make the element occupy the space it needs and not 100% of its parent and margin-bottom will remove the margin at the bottom since after applying inline-block the margin will no longer collapse with the margin of the element below.

  Do not use the strong tag to make the text of an element bolder, the strong tag is used to indicate that the text has great importance or urgency and should not be used to style elements.

  I hope this helps! 😁

  Marked as helpful

  0

  ---

  

  Okonkwo Vivian Uchechi•140

  @okonksPosted 7 months ago

  Wow thank you soo much @Grego14 . I am making those changes now and I have learnt alot I am just having a little issue with trying to center the .container div using Flexbox though, could you help with that too?

  0

  

  Grego•1,310

  @Grego14Posted 7 months ago

  @okonks When you use display: flex on an element it becomes a flex container and if it contains elements inside these become flex items.

  The way align-items and justify-content work can change depending on the value of flex-direction, the default value of flex-direction is row, that means justify-content will handle the main axis, and align-items will handle the cross axis.

  When we use the center value in justify-content this will cause the flex items to move in the center of the main axis of their parent. You may not notice its change if the flex container has a small width .

  When we use the center value in align-items this will cause the flex items to be centered on the cross axis of their parent element. If the parent container has a very small height it may not be noticeable.

  That's why I told you to use min-height: 100% in the body.

  You should also remove the margin you added to the .container element as it causes overflows.

  When the value of flex-direction is column the axis are changed, cross axis takes the place of main axis and main axis takes the place of cross axis, and the same with the justify-content and align-items properties

  Marked as helpful

  0

  

  Okonkwo Vivian Uchechi•140

  @okonksPosted 7 months ago

  Thank you @Grego14 . I have made the necessary changes.

  1