Design comparison
Solution retrospective
That I was able to complete this on my own. One thing I would do differently next time is leaving comments in my code to know what does what so i don't forget or I can use it again in the futrue.
What challenges did you encounter, and how did you overcome them?I had a hard time centering my main container in the middle. i was able to find online resources to help me out.
What specific areas of your project would you like help with?I do not know how media queries work so i was unable to complete the task for the mobile. I needed help spacing my "th" and "td" in my table to create more space between them, i tried many things but and searched online but I couldn't find anything that helped me. I would also like to learn more on how to center better your content.
Community feedback
- @chirag-bishnoiPosted 6 months ago
There is no need for media queries in this particular project. HTML elements are mostly responsive by default except images. Images are inline that's why they don't shrink and because of this our whole content don't shrink. To fix that first of all remove
height: 200px;
andwidth:450px;
from your image tag and give your image tagwidth:100%;
. Once you'll do that your content will start shrinking with the screen as it should be.Now, coming to the second part your question about tables. Just like images tables too are inline elements that means we have to give our table
width:100%;
. Once you'll do that, you can removedisplay:flex;
from your container as it is completely unnecessary. And the last part of your question about centering content, well there are many ways to center something. You have used flex on your body tag but it's not necessary, instead usemargin-inline: auto;
it will center the div horizontally and finallymargin-block: 4rem;
to give some space on top and bottom.You can see my project for comparison, hope it helps :)
1@naranjo77Posted 6 months agothank you, I will be adding the changes now :). @chirag-bishnoi
1@chirag-bishnoiPosted 6 months ago@naranjo77 I just notice one thing in your layout, maybe it's because I didn't specify it but when I was talking about margin-inline and margin-block, I was talking about your #container not the body. Otherwise everything is fine 👍
1
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord