Used CSS media queries

Community feedback

• 

  geomydas•1,440

  @geomydasPosted about 2 months ago

  Hi @jainaparana, I have finished reading your code and your solution and code looks good also. Apart from that, your code has unfortunately few major issues.

  My Tips and Feedback

  1. Use a CSS reset. What it does is that it makes your CSS more easier to work with and also more consistent across devices. Take a look at Josh Comeau's and Andy Bell's CSS reset. I personally prefer using the first one. This applies to all of your projects aswell.
  2. The .attribution div should not have a font-size set in px. Remove the styles in the the `` landmark according to accesibility guidelines. The main tag indicates the primary content of a page. Replace the .attribution div with a main tag instead.
  3. Never ever set fixed widths and heights!. For example, width: 632px. There is no need to so, set a max-width instead. You don't even really need to set a height on an element since the content (text, paddings, margins, .etc) will already take it up. It will be unresponsive and will likely cause overflow issues at some screen sizes. If you really need to set a height, use min-height instead. The only exceptions for this are small icons such as an avatar profile or a small icon.
  4. Don't set unnecesarry properties in your CSS. It just bloats up your code and it does nothing at all. It makes your code messier also. There is no need for the .attribution div to have display: flex and flex-direction: column at all since you aren't using flex properties like gap, justify-content, align-items and all of the child elements are block-level already
  5. Learn when to use paddings and margins. Instead of setting margin-left and margin-right on the child elements, just set a padding on the parent element which is .attribution
  6. Use box-shadow instead of border. Inside your .attribution div, remove the border property and set a custom box-shadow instead. It makes it more closer and accurate to the design
  7. Remove the .scanner div There is no point of it, you can just apply the styles directly to the image

  Don't be overwhelmed by all of this. Mistakes like this are completely normal at this level, I did this once before. Update your code after reading all of this aswell, I will follow up with other feedback. Have a nice day and have fun coding!

  0