media querys, margin, variable

Community feedback

• 

  Roberto Rojas•90

  @roberto-rojas-devPosted 3 months ago

  By the way, here are some resources you may find useful for learning about all the cool things Flexbox can do."

  • Learn Flexbox CSS
  • Learn flexbox the easy way

  Or, if you prefer content in Spanish, you could take a look at these:

  • GUÍA COMPLETA DE FLEXBOX | CSS

  Marked as helpful

  1
• 

  Roberto Rojas•90

  @roberto-rojas-devPosted 3 months ago

  Hi Juan Pablo, I hope you’re well.

  I noticed a few aspects of your solution that could be improved:

  A Better Way of Centering Elements

  In your solution, you centered the .card element by setting specific margin values:

  main {
      margin: 14.375rem 35rem 14.375rem 35rem;
  }
  

  This approach works well for that specific screen size, but if you reduce the width of the browser window, you’ll notice that the layout overflows because the rem values are larger than the screen width.

  A much simpler way to center an element is by using Flexbox on the parent element that contains your card. In your case, that would be the body element:

  body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100svh;
  }
  

  The display: flex; property makes the body a flex container, while justify-content: center; and align-items: center; center the child elements horizontally and vertically. The min-height: 100svh; property ensures that the body takes up the full height of the screen.

  This way, you don’t need to estimate specific sizes to center something, CSS handles it automatically. (To make this work, don’t forget to remove the margins you set in the main element.)

  Avoid Setting Fixed Heights

  Setting a fixed height (as you did with the card) can cause issues. On smaller screens, the text will wrap to fit the available space, but since you set a fixed height for the card, it won’t be able to grow vertically, causing your text to overflow.

  The best approach in these cases is to avoid setting heights altogether. Let the content inside your card determine the height it needs. If you need to increase the height to match a design, you can adjust the padding or margin of the elements. However, if you really need to set a height, consider using min-height instead, so the card can expand if necessary.

  That’s all for now. Keep up the great work, you’re doing well!

  I hope you have an amazing week 💜

  Marked as helpful

  1

  ---

  

  Juan Pablo Cristancho•40

  @JuanCris09Posted 3 months ago

  @roberto-rojas-dev Thank you so much for the review, I got it

  0