@chirag-bishnoi
Posted
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; and width:450px; from your image tag and give your image tag width: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 remove display: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 use margin-inline: auto; it will center the div horizontally and finally margin-block: 4rem; to give some space on top and bottom.
You can see my project for comparison, hope it helps :)
@naranjo77
Posted
thank you, I will be adding the changes now :). @chirag-bishnoi
@chirag-bishnoi
Posted
@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 👍
