Skip to content
Submitted about 1 month ago

Recipe Page Solution - HTML&CSS

feyzanursener•60
@feyzanrsnr
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Recipe page
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

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

I am happy that I was able to make the indentations in the lists in the ‘Preparation’ and ‘Ingredients’ sections correctly. After a little research, I learnt how to do it and successfully added it to my project.

Here is the css code I wrote for the ‘preparation’ part ;

.preparation{

 background-color:hsl(330, 100%, 98%);

 border-radius: 15px;

 padding: 10px 25px;

 line-height: 30px;

}

.preparation-title{

margin-bottom: .4rem;

color: hsl(332, 51%, 32%);

}

.preparation-list{

list-style: none;

padding-left: 0;

text-indent: 30px;

}

.preparation-list li{

position: relative;

margin-bottom: 10px;

line-height: 1.6;

}

.preparation-list li::before{

content: ".";

color: hsl(332, 51%, 32%);

font-size: 45px;

position:absolute;

left: -30px;

top: -37px;

}

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

Honestly, I had a hard time making this project and I couldn't overcome some difficulties. Therefore, there are some errors in my project.

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

Here are the areas where I need help;

--> Firstly, I couldn't get the sentences to move to the bottom line from the desired word.

--> I couldn't make the desired mobile responsive design.

--> Finally, I could not fully provide the indentation in the ‘Instructions’ section.

I would appreciate your help in solving these problems and for other problems in my project, if any.

Community feedback

  • Oluwakayode Ige•60
    @Jesuis-JacquesPosted about 1 month ago

    Great job! @feyzanrsnr, I think you need more padding above and below your recipe card.

    To solve the issues you have, here are some effective suggestions that I used:

    • for the first, padding is a very nice effective way to solve that, I'd advice that you check if you have overridden the style in other CSS styles also.

    • For the second, the code below is a nice way to make it responsive:

    body {
 min-height: 100vh;
  min-width: 100vw;
  max-width: 1440px;
}

.card {
 width: 90%;

    Alternatively, you can use media query to target specific screensizes. For example:

    @media (min-width: 320px) and (max-width: 580px) {
  .card {
    min-height: 100vh;
    min-width: 100vw;

    border-radius: 0px;
    margin: 0px;
    padding: 0px;

  }

  .preparation-time-section {
    padding-left: 10px;
  }
    • For the third, target the li tag and apply any CSS property you deem appropriate: padding, margin. I'd advise you use padding tho.

    Drop a follow if you find these helpful. Happy coding!!!

    Marked as helpful
    0

Please log in to post a comment

Log in with GitHub

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