Qr solution with flex

Community feedback

• 

  Elaine•11,360

  @elaineleung

  Posted almost 3 years ago

  Hi Kevin, great job completing your second challenge, and very good question here as well. I think it depends on what you want to do with either flexbox or grid. I almost always use flexbox for everything; the only times when I use grid are when I need to make a grid-like layout and also when I need quick centering and I'm not concerned with collapsing margins. I encourage you to just experiment with both and see how they work; then you would know which tool you want to use for which job.

  Speaking of centering, I see that you got some flexbox properties already on body, but you also have a margin-top, which I'm guessing is for helping with pushing the component towards the center. Try removing that margin, and then in body, add min-height: 100vh. That should help you with centering! Centering a components requires some height and space, so the min-height is what gives the browser space to center the content. Keep going!

  30

  Marked as helpful
• 

  Travolgi 🍕•31,300

  @denielden

  Posted almost 3 years ago

  Hi Kevin, congratulations on completing the challenge, great job! 😁

  Some little tips for optimizing your code:

  • remove all unnecessary code, the less you write the better as well as being clearer: for example the div container of image
  • remove all margin-top from .contenedor class because with flex they are superfluous
  • after, add min-height: 100vh to body because Flexbox aligns child items to the size of the parent container
  • use relative units of measurement like rem also for the text size

  Hope this help! Happy coding 😉

  10

  Marked as helpful
• 

  Lucas 👾•104,160

  @correlucas

  Posted almost 3 years ago

  👾Hello Kevin Garcia, congratulations for your new solution!

  Answering your question about GRID and FLEX:

  I'll give you my opinion about both properties, when I do complex grids or have to create layout (like component with 2 or 3 column) I go with GRID and I use flex to manage the content inside these column. To create simple component like this QR CODE that has a single column and its simple you can use the good and old flex that has a quick setup and its much more simple than grid.

  Here's a good article explaining when its better flex/grid: https://webdesign.tutsplus.com/articles/flexbox-vs-css-grid-which-should-you-use--cms-30184

  👋 I hope this helps you and happy coding!

  10

  Marked as helpful
• 

  Vanza Setia•27,715

  @vanzasetia

  Posted almost 3 years ago

  Hi, Kevin Garcia! 👋

  Regarding the use case of grid and flexbox, in general, you want to use flexbox if the layout is a one-dimensional layout (either row or column). For the grid, it is a better choice to create a two-dimensional layout (row and column).

  One suggestion I have is to improve the alternative text of the QR code. I would recommend telling the users about the QR code. In this case, the QR code will navigate the users to https://www.frontendmentor.io/. So, the better alternative text would be "QR code to frontendmentor.io".

  That's it! I hope you find this useful! 🙂

  10

  Marked as helpful
• 

  David•7,960

  @DavidMorgade

  Posted almost 3 years ago

  Buenas Kevin, primero que todo enorabuena por finalizar el challenge!

  Me gustaría darte mi opinión personal acerca de cuando usar flex-box o CSS grid

  Intenta utilizar siempre que puedas flex cuando te encuentres con 1 columna sola o una fila sola, el ejemplo más claro y sencillo suele ser una barra de navegación, o incluso algunas partes del layout como por ejemplo el propio contenido de este componente.

  CSS grid en cambio utilizalo siempre que tengas más de una columna / fila, o varios elementos que vayan en distintas columnas y filas, recuerda que debes ir adaptando siempre tu grid al tamaño de la pantalla, y que puedes cambiar los elementos de row y columna a la que tu quieras, independientemente de donde los tengas en tu HTML, esto te va a dar más flexibilidad que con flexbox, pero también es un poco más complicado conseguir el resultado deseado.

  Te recomiendo si quieres practicar que pruebes estos simples juegos de navegador FlexboxFroggy y Grid-garden

  Espero que mi respuesta te haya sido de ayuda, buen trabajo!

  10

  Marked as helpful
• 

  Chyunjet•620

  @Jetyun

  Posted almost 3 years ago

  hmmmm, for me, flex i will use it to arrange the element that needed to be in row or column, so that i no need to use margin or anything to make them tidy, just use justify or align to space each element neatly with each other.

  for grid, i think it is best to use it when you have a lot of boxes of content. Imagine that instead of one picture and a textbox, you will have to code 4 more, each with different sizes. On that situation, i will use grid-template-areas to set the template of the design. if you need to amend the size, just go to the grid-template areas to amend the size, no need to set margin and/or padding, width or height on each boxes.

  You should try Testimonials grid section challenge and 3-column preview card component challenge to get the idea on usefulness on grid template area

  10

  Marked as helpful