Mobile-first recipe page solution using Flexbox

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!

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

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