A recipe page for an Omelette.

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

There were a lot of challenges.

• I could not get the font to work right, despite using an import from Google Fonts, a @font-face rule & referring to the font files in the directory. I had to ask for help before I got them to display correctly.

• I did not know how to move text away from bullets in a list. I Googled and found this solution:

  .list-text {
    position: relative;
    left: 1rem;
  }
  

  By surrounding text with a span, and assigning this class, the text would indent away from the bullet. However, this led to another issue because I had set list-style-position to inside. To fix this, I removed that rule and changed how I padded lists to this:

  ul,
  ol {
    display: block;
    padding-inline-start: 1.5rem;
  }
  

With this, the list text is formatted & indented correctly.

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

I used a single media query, kicking in once the screen width surpasses 568px. The reasoning is the rest of the code is responsive & I don't need many breakpoints (for multiple screen sizes).