@dejuliansr
Submitted
@Fatma-Tawfeek
@dejuliansr
Submitted
@Fatma-Tawfeek
Posted
Great job on structuring the CSS! The grid layout is well-organized and responsive, with effective use of grid areas. A few suggestions:
@Aamnbaba
Submitted
What specific areas of your project would you like help with?
I need help how to tackle the projection of responsive pages. Its looking difficult enough.
@Fatma-Tawfeek
Posted
You've done a great job laying the foundation for a well-structured, responsive layout! Here are a few suggestions to make your CSS even better:
Headings Padding: Instead of padding-inline: 6rem; for headings, consider using margins or flexbox for better alignment across different screen sizes.
Font-size Scaling: Setting html { font-size: 62.5%; } is great for easier rem calculations, but overusing it in media queries (e.g., 50% on small screens) may cause text to become too small.
Responsive Design: Your media queries cover different screen widths, but setting body { max-height: 13.6rem; } in one query could squash your layout on smaller devices. It's better to adjust padding or layout proportions instead.
Grid Class: There’s a class called grid { gap: 1.5; }, but it seems incomplete. Ensure the unit (rem, px, etc.) is specified for the gap value.
Card Dimensions: Fixing card width and height might make it less flexible on smaller screens. Using relative units or setting max-width/min-width may improve responsiveness.
Marked as helpful
@LucasGabriel2806
Submitted
@Fatma-Tawfeek
Posted
Excellent work !! but there are some notes you should take care of :
What are you most proud of, and what would you do differently next time?
I am most proud of implementing the small details of the design. Next time, I would overthink less and try to implement the "easiest" solution, instead of trying to think of a clever implementation, and end up implementing the "easiest" solution anyway.
What challenges did you encounter, and how did you overcome them?
The small bullet points, horizontal lines, nutrition tables, and responsiveness were challenges for this exercise. I overcame them by trying to chunk them down into digestible problems, rather than treating them as one big problem.
What specific areas of your project would you like help with?
Media query breakpoints and responsiveness between the desktop, tablet, and mobile designs. Getting the site to look similar to the given sizes (i.e. 1440 for desktop, 768 for tablet, 375 for mobile) isn't the challenge, the challenge is deciding on how it should look in between the given sizes.
@Fatma-Tawfeek
Posted
@AldousTheWise
Submitted
What are you most proud of, and what would you do differently next time?
I try to use less pure css for flexbox or grid, but I feel proud to make the structure using jquery.
What challenges did you encounter, and how did you overcome them?
The use of media queries. I don't like to use them, but I see they are necessary.
@Fatma-Tawfeek
Posted
It seems perfect from screenshot But I can't find the card code in html file !!
@Fatma-Tawfeek
Posted
@Guitar8634
Submitted
What are you most proud of, and what would you do differently next time?
I am most proud of the following-
What challenges did you encounter, and how did you overcome them?
The challenges I encountered in this order were-
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: calc(100vh - 1px);
}
display: flex;
What specific areas of your project would you like help with?
Areas I'd Like Help With
.attribution a:hover {
font-weight: 600;
transition: all .225s ease-in-out;
color: hsl(47, 51%, 55%);
}
When the font-weight grows, the text on either side moves out of the way to create space. I'd like it to grow over the other text. Would this be a z-index
or `` type solution?
thanks!
@Fatma-Tawfeek
Posted