Responsive recipe page with Flexbox

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

Mostly I am proud of the mobile page I made using media query. It was a fun experiment that ended up working just like I intended.

@media only screen and (max-width: 480px) {
    body {
        margin: 0;
    }

    main {
        width: 100%;
        margin: 0px;
        border-radius: 0%;
        padding: 0 0 30px;
    }

    img {
        display: block;
        border-radius: 0%;
        margin: 0;
        width: 100%;
        height: auto;
    }
}

Next time I would try to shorten the style.css, as it got quite long.

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

First I had problems with getting the main element to display properly. The problem was solved when I realised I had set the page height too small.

The next major problem was with the mobile page. I couldn't get the image to display at the top of the page, but ultimately I just had to tweak padding and margins a bit.