Help with learning layering in CSS
Can somebody please recommend me a project to do for completely understanding how to do layering of images/divs (for all positions i.e, absolute, relative, fixed etc.)?
I recently started doing Frontend Mentor and came across the following challenge for which I submitted a solution https://www.frontendmentor.io/solutions/responsive-made-with-tailwindcss-and-react-need-suggestions-iGx1IBWVyw
Here is the website for the solution - https://fm-interactive-card-details.vercel.app/
For context, I have an idea of FLOW in CSS, and also have a good understanding of flex and grid.
This solution took a lot of time for me, and I'm not satisfied with the result. The reason it took so long was that, I was trying to increase the card sizes as the div in which they are increased, but the texts inside of them were not able to keep up with the increase in size.
Also, I could not get the aspect ratios same on all devices.(well thats because i just got frustrated and started using absolute positioning) The site doesn't look the same in iPhone SE and XR. How and where do i even learn to do that?
Thanks for reading my rant.
Frontend Mentor
Frontend Mentor | Responsive, made with TailwindCSS and React (need...
mihirbhatkar's front-end solution for the Interactive card details form coding challenge on Frontend Mentor
5 Replies
I saw this on front end mentor too,,it’s great stuff. Currently working on an e-commerce website.
You can check out Icodethis.
You can do this multiple ways, negative margins, transform translate, using the inset values if it's position absolute or grid overlap.
Though for something like this I'm unsure on the best way to go about it.
yeah im new to this idk the best practices
do you know any open source projects to which i can contribute? I looking to start, but I cant find anything specific. Like i dont even know where to look. have u done open source?
Thanks, will check it out
Yes you can do open source project contribution first you should learn how to do it so you can learn it by following the "first contribution" repository steps and I also learned how to do open source contribution from this repository you just type first contribution GitHub repo and then you follow the steps
#learnCSSGrid
Grid for layering is ❤️