@dod123-stack
Latest solutions
Responsive Stats Card Component using HTML, CSS, TailwindCSS
#accessibility#tailwind-cssSubmitted about 2 years ago
Latest comments
- @akshay63
Hey @Doaa. The thing that made your layout a bit confusing is that you have used display: grid for the container but in the media query you've used the "Mobile-first" approach where you have used the "display: flex;" property. This is where all the problems related to layout issues lie.
If you want to use grid, use only grid for the placement of the component & set display: grid; to the container and once you set this then you don't have to specify the display property in the media queries. Just use its properties for alignment and position.
for ex: .container{ display:grid};
@media screen and (min-width: 800px){ grid-template-rows: repeat(2, 1fr); }
Hope it helps.
- @syedalimansoor@akshay63
Hey @Syed Ali Mansoor! Great effects, there. I loved it👌😉. Thanks for sharing your solution. I'm too learning a lot from APG. Btw how did you achieve the hover effect though?
- @FranciscoFrontEndDeveloper@akshay63
Hey@ FranciscoFrontEndDeveloper! Even if you done some mistakes you can improve a lot by trial and error approach in the challenge.
I have done some changes to the code if you don't mind. You can improve your mistakes and change accordingly. Thanks
- @matiussi@akshay63
Hey laura-2035! Your solution looks great and yeah a bit messy in the Media query part. I know building the "Mobile-first" layout is a bit difficult because I have told it is. I used max-width only till now but I will try min-width also in my coming challenges.
Some suggestions from me are- When media queries are triggered in 1200 and 900, I found extra space between rating bars and review cards. You can center the rating bars and make the review cards 100% width.
Keep coding! 👌👍
- @santu369@akshay63
Hey! shiva santosh jana. I liked your solution to this challenge. Keep coding! 🎉
- @vstrogalev@akshay63
Hey, Viacheslav! Even if you have done some mistakes, you have done a great job in creating the site for the desktop. Don't bother much rather revise the concepts of basic layout methods using CSS and apply those to your project.
Some changes I suggest you try out: 1.To answer your first question: We have to only change the font size of the overall font in the HTML element itself only and not to both HTML and Body element. 2.To change the background-image size: set the 'background-size: cover' for the image and do not use the object-fit property for images because it is for background videos.
I also have done some changes to your code if you don't mind.
