Submitted about 2 months ago

Responsive Recipe Page using CSS media queries

resegoreey•30

@resegoreey

A solution to the Recipe page challenge

Preview Code

Solution retrospective

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

I am proud of how I was able to know which tags and elements to use on my HTML file and the styles I could implement on my own in my CSS stylesheet.

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

I had troubles with getting the image to fit into the container and also making it adjust to the small screen sizes. I also troubles with making the oage responsive using media queries. I overcame this by watching short clips and using w3schools website to look for similar examples.

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

Fonts. I don't know how to use the fonts given in the starter pack. Even though I tried looking for many examples, I couldn't use the fonts.

Code

Please log in to post a comment

Community feedback

P
Andrey•4,400
@dar-ju
Posted about 2 months ago
Hello!

The most correct way is to use woff and woff2 font formats. The first one is for old browsers, the second one is for modern ones. It is better not to use ttf in the project, there is a lot of unnecessary information, which is why it weighs more than woff2.

Download ttf from google fonts, convert it. Use any font converter, for example this one Put the woff and woff2 files in the fonts folder.

Connect them at the very top of the css file (specify the correct path):
```
@font-face {
  font-family: "BeVietnamPro";
  src: local("BeVietnamPro"),
  url("../assets/fonts/Outfit-Regular.woff2") format("woff2"),
  url("../assets/fonts/Outfit-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
```
(use a separate @font-face for each font-weight)

And assign the font to the project in the body tag - font-family: "BeVietnamPro", sans-serif;

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