Skip to content
OverviewSolutions
3
Comments
2
Charan
@CharanMN7

All comments

  • SAMUEL WANJAHI KARIUKI•30
    @samellowSubmitted 7 months ago
    What are you most proud of, and what would you do differently next time?

    I was able to go close to the design specifics for desktop.

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

    I did not do the mobile design - it was a bit challenging. Styling the lists was also a challenge

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

    Mobile design and styling lists

    Recipe page for desktop

    1
    Charan•50
    @CharanMN7Posted 7 months ago

    Hey Samuel!

    Saw you needed a little help with Mobile design and styling lists. Here are a few things that'll help:

    For the mobile design,...

    • Remove the top and bottom margins of your content container
    • For the image to go full width, you can remove the padding of your content container and add margins to the <div> tags that you created for the different sections of the content.

    For styling the lists...

    • You can play with the padding property of the <ul>, <ol>, and <li> tags until it feels right

    Here are some other things you may want to consider...

    • I see that you used a list for the "Nutrition" section. You could replace that with a <table> instead, that would make it easier to style that part of the webpage
    • I see that you used a lot of <div>s and <h1>s inside them. It is usually recommended that you use only one <h1> tag per page. To give more sematic meaning to your code, you can replace your <div>s with <section> tags (which behave exactly like <div>s) and change the <h1>s to <h2>s inside them.
    • Also, looks you missed using font-family: "Young Serif" for the headings.

    Hope it helps!

    Marked as helpful
    0
  • Felix•60
    @Farrukh997Submitted about 2 years ago

    What do you think about my solution? How can I improve it?

    QR Code Solution

    1
    Charan•50
    @CharanMN7Posted about 2 years ago

    Hey Felix! Your solution looks great. But, the font style 'Outfit' isn't showing up in your project. You might wanna look for what's causing this.

    0