Skip to content
Submitted 15 days ago

Responsive Recipe Page using Css Flexbox, media queries and BEM naming

Sean Mafnas•110
@Makkatlahi
A solution to the Recipe page challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?

I'm proud that I was able to approach this in a mobile-first manner. Adjust the styling according to the dimensions was tricky, but I found it to be a little less troublesome when going from desktop to mobile.

What challenges did you encounter, and how did you overcome them?

I had a few challenges that forced me (in my current skill level) to utilize more specific manipulation of the styling components. I didn't want to break up the original structure of the html because I thought it would disrupt the layout and styling of the mobile view. I decided to tweak the surrounding properties of the property I was trying to correct.

What specific areas of your project would you like help with?

I would like help with coming up with better styling practices that allow me to avoid having to explicitly manipulate a particular property in order to achieve the desired result. I felt this was analogous to 'hard coding' values instead of passing in ones received from user input.

Code

Please log in to post a comment

Log in

Community feedback

  • Harsh Kumar•3,410
    @thisisharsh7

    Great job on the Recipe Page! Your mobile-first approach is commendable, ensuring a solid foundation for responsiveness.

    • The clean HTML structure and use of CSS custom properties (e.g., --Stone-100) enhance maintainability.

    • To improve styling practices, avoid hard-coded values like width: 200px or width: 136% in favor of relative units (e.g., vw, rem, or %) or CSS calc() for dynamic sizing. This reduces specificity and makes adjustments easier.

    • Consider using CSS Grid for the main layout to simplify alignment and spacing, reducing reliance on manual tweaks.

    • The media query range (500px–1580px) is broad—add intermediate breakpoints (e.g., 768px) for smoother transitions.

    • For the image, use aspect-ratio to maintain proportions instead of fixed heights.

    • To level up, explore SASS for nesting or Tailwind for utility-first styling. Strong work—focus on relative units and modular CSS for more flexible, scalable designs!

    Great work overall- Happy coding!

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord