Responsive recipe-page

Community feedback

• 

  Dylan de Bruijn•3,230

  @DylandeBruijnPosted 4 months ago

  @Obom23

  Hiya! 👋

  Congratulations on your solution, it looks very close to the design! I can tell you put a lot of effort into it.

  Things you could improve ✍️

  • You could add a min-height: 100vh to your body element so it takes up the full height of the viewport while still being able to grow when the content inside it grows.

  • Try experimenting with CSS variables, they help you make your CSS values more reusable across your code.

  • You can make your solution more responsive by changing / adding the following code:

  body {
      margin: 0;
      background-color: beige;
      display: flex;
      justify-content: center;
  }
  

  .container {
      display: flex;
      flex-direction: column;
      background-color: white;
      padding: 1em;
      max-width: 500px;
  }
  

  • Try adding the right font families to your solution

  I hope you find my feedback helpful! 🌟

  Let me know if you have more questions and I'll do my best to answer them. 🙋‍♂️

  Happy coding! 😎

  Marked as helpful

  1

  ---

  

  P

  Philipp•130

  @Obom23Posted 4 months ago

  @DylandeBruijn Thank you very much! I updated the files and also took a look at your solution to better understand the variables and their usage.

  I noticed that you directly linked the .scss files in the .html file. I had to compile the .scss files first and then link the generated .css file.

  Are you using a CSS framework that allows this, or am I doing something wrong?

  0

  

  Dylan de Bruijn•3,230

  @DylandeBruijnPosted 4 months ago

  @Obom23

  Good question! You are correct that you need to compile SCSS files to CSS to use them in your project. I use a build tool called Vite which does all the heavy lifting for me and it allows me to link SCSS files directly in my HTML.

  In summary, when you use a SCSS file directly in your HTML and start the Vite development server, Vite compiles the SCSS to CSS, injects the CSS into your HTML, and sets up a watch system to automatically update the browser whenever you save changes to your SASS files. This process leverages Vite's efficient handling of modern web technologies to provide a fast and responsive development environment.

  I hope that makes sense to you!

  1

  

  P

  Philipp•130

  @Obom23Posted 4 months ago

  @DylandeBruijn Allright, thanks!

  0