@Rapbit27
Posted
Hello Aditya,
I'm gonna try and put some pointers out there, although I'm not far off from your level, they are advises I got during my previous challenge. Its an exact quote word for word:
"Your solution looks good on larger screen sizes but not so good on mobile screens. The go-to is to account for screens with a width from 320px up. Your containers use a fixed width, which is generally not good. Let the elements take up the space that they need - that's what makes your site responsive. If you give the outer container and the card a max-width instead of a fixed width, then you should already see what I mean.
Furthermore I advise you to go through the learning paths here on FEM or reading the MDN documentation about the main rules of semantic HTML. Your site should have a <main> element and since there is no <header> provided by the challenge, you could have just left it out for this one, but the attribution fits perfectly inside a <footer> element (sibling to the <main>)
Also there are general rules for CSS which you should look at again: Do not declare font-related CSS styles in px, this makes the website inaccessible to people that declared a custom font-size in their browser. Using rem accounts for that.
Another quick tip from my side, it's generally easier and more common to use (min-width) media queries, so going "mobile-first". On larger layouts you'll have it easier, because stuff just stacks on top of each other in mobile views most of the time. This is the default behavior of block elements. Then you only have to add min-width media queries for larger screens to add the neccessary styles. 😀
I strongly advise you to go through your code and look at it again to fix at least the stuff I pointed out and also re-test your site with the help of the developer tools of your browser for different screen sizes. You should at least use Firefox and Chrome to ensure it works for most of the users."
I hope this helps you just as much as I found it helpful, and keep at it!!
