Skip to content
Submitted almost 5 years ago

Responsive Layout

Stoefy•10
@stoefy
A solution to the Single price grid component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

First HTML CSS Exercise, would love some feedback! Like: Wondering if this is the correct way to make it responsive. If I could improve the splitting up of elements. Make it more readable.

Code

Please log in to post a comment

Log in

Community feedback

  • Christopher Till•1,070
    @chri55

    Hi Stoefy,

    You have the right idea so far, where the elements stack once they hit the media query size. Good work on that! You also did a great job at matching the design colors and styles, and your use of great semantic HTML is a plus. One thing I would say to improve readability would be to split up the long <p> line with lots of <br> inside. But otherwise, was quite clean and easy to read.

    I suggest doing some research into Flexbox.

    For this I recommend going through the side of Parent Flex Container first as it goes over the essentials of FlexBox. It is a bit different from the flex property that you used in that it allows a lot more options for alignment and justification of items inside the flex container. It's also a really great way to make a component become centered inside of the container or inside the page, like it is in the design.

    You may also notice that it could be useful for mobile, as flex children that are stacked in row format on desktop can be moved to column format on mobile without having to move too much code.

    Check it out, and let me know what you think! 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