Responsive website using flex box

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 3 years ago

  👋Hi Sandy! My name is Vanza!

  Next time, if you want to ask questions, input your all questions inside the Questions for the community section when you want to submit the solution. That way your question will be more likely get answered. Because right now, nobody know that you have a question.

  I have some feedback on this solution too as well:

  • Only use one h1 at a time, since it's consider as a best practice.
  • On your .card, don't use vh unit as a height, since it will cause an issue if the user screen height is too high or too low. Instead try to use rem unit.
  • Try to use rem unit on your font size, it's simply because it will allow the users to change the font size base on their browser setting.

  That's it! Hopefully this is helpful!

  0
• 

  Sandy•210

  @sandy930Posted over 3 years ago

  Can someone help me explaining why my button in header part can not inherit the full width of li tag. I cannot make these word in the button display one line. It is always been out of the flow. Just in mobile viewport

  0

  ---

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 3 years ago

  @sandy930 Well in my opinion, it's because that the li is display: inline-flex which means that the li is display: inline and the a as a flex child. The display: inline is always take the smallest width as it can.

  So, my recommendation is that, instead of depending on a width of li, you can try to style the a like a button:

  .btn {
    display: inline-block;
    padding: 1rem 4rem;
  }
  

  So, right now the width of the button is depend on the padding and also prevent the text becoming two lines.

  0