Recipe Page Challenge

For the mobile design, you can use CSS Media Queries, it will only take you a few minutes to understand how it works. CSS Media Queries allow you to apply different styles for different screen sizes, making your web design responsive and adaptable to various devices.

Here's an example:

Desktop Styles

main {
    margin-top: 100px;
    margin-bottom: 50px;
    border-radius: 20px;
    padding: 40px;
    background-color: lightblue;
}

Mobile Styles with Media Queries

To change the main element's style for screens that are 768px wide or less, use the following Media Query:

@media (max-width: 768px) {
    main {
        margin-top: 20px;
        margin-bottom: 20px;
        border-radius: 0;
        padding: 10px;
        background-color: lightcoral;
    }
}

This Media Query modifies the main element's styling specifically for smaller screens.

I hope this was clear enough for you to understand :)