All comments

• 

  Moises Castillo• 220

  @mcasti19

  Submitted 11 months ago

  It's my 4th challenge, even though the appearance is very similar, I'm not entirely convinced that the code is clean, I think there are better ways to do some of the things I did, I would be very grateful if you can see my code and Give me some recommendations and some tips to improve, thank you very much!

  Es mi 4to reto, a pesar de que la apariencia es muy similar, no estoy del todo convencido de que el código sea limpio, creo que hay mejores formas de hacer algunas de las cosas que hice, estaría muy agradecido si pueden ver mi código y darme alguna recomendación y algún tip para mejorar, muchas gracias!

  

  Testimonials_grid_section using Grid

  1

  30

  

  Jere• 150

  @chungvuiloong

  Posted 11 months ago

  Hi mcasti19,

  Congrats on completing and tackling a grid component!

  I love how the cards decorated exactly like the given design.

  May I suggest these following code to help get it centered?

  body { height: 100vh; display: flex; flex-direction: column; justify-content: center; }

  main { margin: 0 auto; }

  Please let know me how it works. Lets think of a centering solution together

  1

  This comment has received 1 replyShow
• 

  Amr Atif• 60

  @amr-atif

  Submitted 11 months ago

  Experimenting with Flexbox for improved layout design, aiming to enhance skills further.

  

  Order Summary Card using HTML&CSS

  1

  71

  

  Jere• 150

  @chungvuiloong

  Posted 11 months ago

  Hi amr-atif,

  Great job on this component as well as implementing Flexbox skillfully!

  If you are interested, you can add the following code, it will help center the image to look like the given design.

  .hero { background-position: center; }

  1

  This comment has received 1 replyShow
• 

  Inga Safranova• 130

  @IngaSafranova

  Submitted 11 months ago

  

  Responsive price card

  1

  40

  

  Jere• 150

  @chungvuiloong

  Posted 11 months ago

  Hi,

  Well done your challenge!

  I would to add that if the body has this following css code, it will assist your card component to be in the center.

  body { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; }

  min-height: 100vh -> make the minimum height of page full screen. flex & flex-direction: column -> makes content direction from top to bottom justify-content:center -> make your content in the center

  Let me know how it goes for you.

  Marked as helpful

  0

  This comment has received 2 repliesShow
• 

  Arnold• 10

  @arnoldd98

  Submitted 12 months ago

  Is this the best way to center a div?

  

  QR Code Component

  2

  40

  

  Jere• 150

  @chungvuiloong

  Posted 12 months ago

  For my projects,

  Firstly I create a div, this the the container for contents. Then I add the classes flex, flex-columns, then justify-center as css. This usually does the centering for me for me.

  Let me know if it does it for you too

  1

  This comment has received 1 replyShow