Mobile-first recipe page solution using Flexbox

Community feedback

• 

  Daniel 🛸•44,310

  @danielmrz-devPosted 9 months ago

  Hello @alonsovzqz!

  Your project looks great!

  I have one suggestion for you to improve it even more:

  • Using padding is not the best option to center an element. Here's a very efficient (and better) way to place an element in the middle of the page both vertically and horizontally:

  📌 Apply this to the body (in order to work properly, don't use position or margins):

  body {
      min-height: 100vh;  /* Use when the whole project fits inside the screen  */
      display: flex;  /* it works with grid too  */
      justify-content: center;
      align-items: center;
  }
  

  In this case, due to the length of the element, you might need to use margin at the top and bottom.

  I hope it helps!

  Other than that, great job!

  Marked as helpful

  0

  ---

  

  P

  Alonso Vazquez•170

  @alonsovzqzPosted 9 months ago

  @danielmrz-dev Thanks so much! In this case I think I followed the "code" Figma provided so I went for it. But now will try with your solution and from now on I'll just not try to look too much into Figma's code.

  And I really appreciate the cheers!

  1
• 

  P

  Asish Patnaik•160

  @asishPatnaik2000Posted 9 months ago

  Hi, some resets I constantly use is for all elements I make the elements border-box

  *{ box-sizing: border-box }

  what it does is considered the border, margin, etc. defined by you is also considered for size of an element making the UI more consistent. If you don't add this border size and an elements width are calculated separately for an element. What you can also do is make image as block elements so when adding image in UI doesn't have its default inline behavior and takes entire block space. This is optional only if you need it, you has add, for me it helped to get more control over inline elements like img element

  Learn more about resets from here:

  css-reset

  Hope this helps

  Marked as helpful

  0

  ---

  

  P

  Alonso Vazquez•170

  @alonsovzqzPosted 9 months ago

  @asishPatnaik2000 Thanks for the input I really appreciate it. I was looking for something pretty basic, since in the internet I found something close to what the link you provided but wasn't entirely sure that will cause any weird behaviors on the page but now with the link you proveded I have a better understanding about what the reset CSS does. And now I know I was wrong 😜 but thanks for the help

  1
• 

  Muhammad Danish•200

  @believer-danishPosted 9 months ago

  Use display:block with every <img> element because margin property is not respected in inline elements.

  1