I'm not sure how to make the cards look consistent spacing-wise like in the reference because they have different amount of content. If one card has a smaller title then the paragraphs won't be perfectly in line. My assumption is that I should assign a width to the headers and paragraphs but that seems sketchy. Any advice would be nice.
Any advice on improving how I chose to handle the responsive layout would be appreciated as my abilities are very narrow and won't be able to know if there's an obviously better way.
I'm really struggling with the recipe image for the mobile layout. I'm not sure how to make it take up the full width because the padding is in the way, but I can't reasonably get rid of the padding without restructuring the HTML, so I suspect I didn't structure the HTML adequately. I would appreciate advice on this.
Any advice pointing out something I'm not realizing that I could have done differently or better. Particularly with my CSS file, even something like code clarity.
Is there anything I can do to improve my actual CSS? Despite the end product looking solid, I'm curious if there are any improvements that could be made to how I structure my CSS or just something else that I am missing.
I largely struggle with any sort of spacing properties and when to use them. Notably these: height, max-height, min-height, and the width versions, sometimes padding/margin too. Especially when it comes to units, the units always cause me pain. I never feel confident with the units I select because it feels so arbitrary, and you can tell from how the text looks compared to the reference.
Doing the media query was quite difficult for me, and left me quite stuck in some parts, but with some adjustments it was possible to "finish" the project
Hi there! It looks like some features from the design solution are missing, notably:
Regarding the HTML:
<header> tag will cause issues that aren't obvious.<table> element that you can use.Final Tips:
Great work on getting the responsive media queries to work.
A fabulous solution and I appreciate the customization for personal use along with the attribution. At first glance, it might be nice to adjust the font weights but it's really up to you. Additionally the foreground color on the button-links has a contrast ratio of 2.41:1 which would not satisfy accessibility requirements.
The scroll animation is also a nice touch. Your padding is also a lot better than my solution! Mine got a little bit weird, probably because I separated my button-links with margins whereas you used a flex box which is much smarter.
At first glance, well done! The only thing that is noticeably different is that the line-height wasn't changed for the main text. It also looks like the title needs to be a link as well, it is currently just text.
Don't forget to set fallback fonts for browser accessibility in case a font is unable to be loaded. By comma separating additional fonts, they will serve as fallback in priority order. For example:
font-family: 'Figtree', sans-serif; Also don't forget to alt text your images.
You reused classes a lot which is great! Notably the info class, I pretty much had a new class/id for every element which probably over complicates things.
Overall great work!
A lovely solution. It looks like your card is noticeably smaller, I used the mobile width in the style guide to get a little closer.
My notes:
.image does anything.border-box, however you didn't take advantage of it for the .image because you specified a width and height when you could have given it width: 100% and padding which would preserve the image dimensions and just size it based on the parent container..image div and .background seems a little redundant for this project, although in others it would be totally valid.What I did differently: