Css flexbox, HTML

Hi there!

Great job finishing the project. You mentioned that you would like tips on writing better CSS and that you had some difficulty moving from mobile first to desktop.

When moving from mobile to desktop, it's best to leave the CSS as simple as possible. You may be tempted to add styling that will be responsive when the screen size grows larger, but until you find a good groove, responsive styles can always be added within the media queries.

1. I see you applied flex to the body element, but this is unnecessary. When flex is applied to an element, it condenses its width to the content, and with a width of 375px applied to the section container, extra space is on the left and right when the screen grows larger than 375px. For mobile view, the recipe should stretch across the screen until mid-tablet range. So, I would suggest removing those stylings. Doing so already puts you on a better trail.

2. You have your media query set to happen at 1440px. The challenge style guide mentions that the desktop design was designed at 1440px, but this does not mean you must use that as a breakpoint. You might find it easier to follow the philosophy of adding a breakpoint when the design breaks or starts to look awkward. This is why I mentioned the recipe stretching across the screen until mid-tablet range. And if you look at the image around 1312px, it stops growing. This tells you that that is the image's max initial width. Your breakpoint should happen before then.

3. A lot is happening at the breakpoint. Most of the changes will not be required if the CSS were simplified. For example, the body, main, .mobile, and .desktop selectors all have style applications that are unnecessary save for the border-radius. And in actuality, .desktop and .mobile could be replaced with a singular class e.g. .recipe-card

4. You might wonder how you would center the recipe if flex is not used (because flex isn't needed for this project). What you would do instead is set a max-width on one of the containing elements (main or section) along with margin-inline: auto; Doing so will align the recipe horizontally. All you would need to do then is move the recipe down with margin.

Sorry if this is a lot! I like to be as thorough as possible and I hope this helps!

If you have any further questions, please feel free to ask. CSS is super fun. :)