Im proud that I was able to complete this but also I need to work on keeping my project more organized and my naming conventions cleaner. Most of all i struggle on keeping my CSS clean.
Great solution! Keep an eye for margin and paddings at desktop size
great solution. add padding to the top or just center it in the body with flex or grid
creating a cross pattern grid was more challenging than i expected.
nice solution. maybe use letter-spacing on your heading and the font-sizes in the cards dont look right to me :)
i used grid in tailwind css
What challenges did you encounter, and how did you overcome them?some things was overriding so figuring out was them challanging.
What specific areas of your project would you like help with?Responsive part because i still get lost in these things
hi! great solution :) maybe giving the img in mobile a fixed hight can make a huge difference. and try giving the body some padding on x- and y-axis in mobile
I learn a lot about listand table and I'm really happy to discover new way of thinking, thanks to css counter and pseudoclass ::marker.
Table is not really easy to build and to style. I don't know but for me, I think it's a little bit old fashion… It take to much effort for a basic result.
What specific areas of your project would you like help with?Is there an ohter way to build the table with simplicity?
overall a good solution. but keep an eye on the headings font-weight. it looks like its just a regular or even less font-weight
i did the same mistake :) links should be smaller width. in your solution maybe around 65%. but great solution overall. love it!
It was easier doing this the second time from Figma.
What challenges did you encounter, and how did you overcome them?I couldn't work out how to make the font size change without media queries. I also found centering the card tricky; for some reason, this time : display grid with place-content: center didn't work on the .card-container. I had to use place-self: center on the .card itself.
What specific areas of your project would you like help with?If .card-container is set to display: grid; and .card is a child of .card-container, place-content: center; did not work when width of .card was set to min(384px, 100%-48px). It seemed to calculate the larger width of the min options on desktop, use this to incorrectly center the content, and then shrink down to the smaller of the min options in terms of what it actually painted. Is this just an issue with using width: min(a,b) with grid children? I'm aware of minmax for the grid-columns, but am wondering if we can use plain old min for the grid children.
Any help on how to make the font smaller without media queries as the front end mentor challenge suggested would be appreciated :)
hi!
its a really good solution!
place-content: center should be set on your card-container. And to get the font-size smaller wo/ media-queries we need to set a dynamic fontsize: i am using this formular:
font-size: clamp( minValue rem, calc(minValue rem + (maxValue - minValue) * (100vw - minVw px) / (maxVw - minVw )), maxValue rem );
That i actually got it to line up useing CSS
What challenges did you encounter, and how did you overcome them?Figuring out which way to go and use flex and border box
What specific areas of your project would you like help with?Learning how to move all elements around the page. And what CSS elements do what.
hi! you could do a min-width: 100svh on the body to stretch it out to the bottom and then place the content into the center with either flex or grid
