Hi @Dontae15
I'm afraid there are quite a lot of issues in this code that you should correct before moving on to anything else.
I recommend you read the comments I've left already on two other QR code solutions as these will really help you I think and it saves me writing all the same stuff again. These are really common beginner mistakes and it will help to fix them as soon as possible so you have a good foundation for future challenges.
- https://www.frontendmentor.io/solutions/qr-code-component-ZB_RG6fh_M
- https://www.frontendmentor.io/solutions/used-flexbox-to-build-responsive-card-6qH73__GuI
The only additional feedback for you specifically that comes to mind is:
- Don't style on IDs!. That's not what they're for. Use classes to style things.
- Make sure all content is contained within landmarks. This component should be wrapped inside a
main
and if you include the attribution that should be inside afooter
separate to the main. - This challenge does not need a media query. You can see the designs look exactly the same. So if you find yourself reaching for media queries it's a sign there's a problem somewhere else in your code. Pause. Rethink. The advice given on the solutions above will fix this and remove the need for media queries... BUT note for future: When you do come to challenges that need a media query, this isn't how you should approach them. The mobile styling should be the default, then you add a min-width media query to change properties that need to change for larger screens. Also media queries should always be defined in rem or em not px so that the layout scales correctly for all users, including those with a different text size. I've written a full post about media queries but I recommend you only read this once you've finished refactoring this challenge first, as its not applicable here and there are more important learnings to master before media queries.
@surajdkale I also recommend you read these pieces of feedback as your blog preview card solution is suffering a lot of the same issues and overflowing my screen. There are additional feed backs needed on the HTML of that one but I'm sorry I am out of time to do that today.
@surajdkale
Posted
Okay@grace-snow