When media query kicks in for desktop size, I have changed text alignment to left like so:
text-align: left;
But for some reason, this specific property is not applied unless I add !important to it:
text-align: left !important;
Is there any reason why all other properties in media query override correctly, while text alignment does not?
Hello, you can check using browsers developers tools why this is happening.
#mainContent > * {
margin: 1em auto;
text-align: center;
}
is above/has priority over:
@media screen and (min-width: 1000px)
h1, p {
text-align: left;
}
Please tell me what you think of the design
Hi, in your current approach user has to download both mob and desktop images even if he needs only one. I am suggesting to use picture or to change img url using media query. Also I suggest to use css variables for repeating style values (bacground colors, etc)
Please give feedback, my code is not up to the mark. The card isn't responsive, will go through it again. But it was fun and very productive IMO.
Hello, adding to the comment above would suggest to use em sizes instead of px.
To add rounded corners you should use border-radius property: https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius
Hello Everyone! 👋
This solution has received a major update! 🎉
Feel free to write down any suggestions or comments you may have! I'll be happy to respond and fix my code as soon as possible.
Thanks!
Hello, yes it is responsive, it is impressive that it was made using android device!
