Responsive using flexbox

Community feedback

• 

  Luís Gustavo Gorniak•160

  @luisgustavogorniakPosted 3 months ago

  Nicely done! Looks really close to the design! I can see you put a lot of effort in it!

  To answer your first question, flexbox and grid are CSS rules that basically do the same thing, but the best practices are to use grid when its for building a complex layout and flexbox is just for align elements.

  If you're interested in build a table-like layout, grid is a go, but if you're trying to align elements inside the cells of the grid created table, flexbox is the best choice.

  About the responsiveness of the page:

  • I see you worried about the UX by adding a lot of media queries for differents viewports of differents type of devices. In this kind of job its better that you keep it simple, a single media query call just for when the viewport is for a mobile device is enough.
  • That said, my advice is to adhere to the concept of mobile first. Today is importanter that you first build your code to work on mobile devices first, and then you add the media query for its no longer a screen of a mobile device, like: @media screen and (min-width: 784px).

  You'll see that its much less work and your code will look cleaner.

  Lastly, about your titles, they look streched because they're using the same h1 element, and its parent element is setted to have a static width. Try removing the width rule and separating the titles with h1 tag for each, and change the parent div rules for flexbox and text-align, like this:

  .bigText {
    display: flex;
    flex-direction: column;
    text-align: center;
  }
  

  I hope my review is helpful, my friend! Have a good one and keep coding!

  0