Skip to content
Submitted 8 months ago

recipe page responsive, flexbox @media

David•40
@DavidGonzalezve
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Recipe page
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

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

This is my first time using media queries; I need to enhance the semantics of both CSS and HTML to make styling the containers more organized.

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

To understand how to adapt to mobile devices, one of the most commonly used solutions is using media queries, which is what I implemented.

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

The best way to adapt to various screen sizes, in this case using media queries with comparison operators

Community feedback

  • Monika K•200
    @Monika-2509Posted 8 months ago

    To Overcome media queries related issues:

    1.Understand the Concept: Grasp the concept of media queries, which enable you to apply CSS rules based on various device characteristics like screen size, orientation, etc.

    1. Learn Syntax: Familiarize yourself with the syntax of media queries in CSS, which typically start with @media followed by the specific conditions and CSS rules enclosed within curly braces also Breakpoints.

    2. Practice Responsiveness: Practice creating responsive designs by using media queries to adjust layout, font sizes, margins, etc., for different screen sizes and devices.

    3. Experiment: Experiment with different breakpoints and conditions to understand how media queries affect the layout and styling of your web pages.

    4. Test Across Devices: Test your responsive designs across various devices and screen sizes to ensure they adapt correctly.

    5. Stay Updated: Stay updated with new features and best practices in CSS media queries to leverage the latest techniques for responsive web design.

    6. Resources and Documentation: Utilize online resources, tutorials, and CSS documentation to deepen your understanding and mastery of media queries.

    0
    David•40
    @DavidGonzalezvePosted 8 months ago

    muchas gracias, seguire tu consejo y recomendaciones para dominar este tema a profundidad @Monika-2509

    0

Please log in to post a comment

Log in with GitHub

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