Design comparison
SolutionDesign
Community feedback
- @krushnasinnarkarPosted 5 months ago
Hi @matheusmirandaalmeida,
Great Work!
Here is some suggestions for you:
Centering and Alignment Adjustments
Changes:
-
Removing:
height: 1300px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
-
Adding:
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin-top: 100px;
padding: 40px;
body { background-color: hsl(30, 54%, 90%); display: flex; justify-content: center; align-items: center; flex-direction: column; } .page { width: 600px; margin-top: 100px; padding: 40px; background-color: hsl(0, 0%, 100%); }
Adjusting Image and Content Layout
Changes:
-
Removing:
background-position: center 30px;
height: 260px;
-
Adding:
height: 240px;
- Adjusted padding for
.title
,.paragraphe
,.Ingredients
,.Instructions
,.Nutrition
topadding: 10px 0;
.image { height: 240px; background-image: url("../assets/images/image-omelette.jpeg"); background-size: 520px; background-repeat: no-repeat; padding: 10px; } .title, .paragraphe, .Ingredients, .Instructions, .Nutrition { padding: 10px 0; }
Certainly! Here's the detailed breakdown of the changes for the
.Preparation
class:Adjusting
.Preparation
ClassChanges:
-
Removing:
position: relative;
left: 40px;
width: 500px;
-
Adding:
margin: 10px 0;
.Preparation { margin: 10px 0; padding: 10px; /* You may want to adjust padding as needed */ background-color: hsl(330, 100%, 98%); color: hsl(30, 10%, 34%); }
Enhancing Table Width and Styling
Changes:
-
Removing:
width: 560px;
-
Adding:
width: 100%;
CSS:
table { display: table; width: 100%; border-collapse: collapse; }
Feel free to reach out if you have more questions or need further assistance. I hope you find my feedback valuable, and I would appreciate it greatly if you could mark my comment as helpful if it was!
0 -
Please log in to post a comment
Log in with GitHubJoin 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