css, html,media query

Community feedback

• 

  Steven Portas•440

  @satropPosted about 2 years ago

  Hi there!

  You solution turned out great! But your CSS could use a little help.

  Think of your code in the CSS file like a water fall. The water at the top will be the same at the bottom. So you don’t need to re-wright your selectors. For example.

  Your body selector on line 1:

  body{ margin: 0; padding: 0; background-color: hsl(212, 45%, 89%);
  }

  It’s the same on line 42 that’s inside your media query. There is no need to do this because it’s not changing. And this is the same for any selectors. If they don’t change there is no need to we-right them.

  Your media query wont really do anything as your not changing anything inside it. As a very loose rule of thumb, to make your life easier stick to using just max-width and think of the layout from a small screen (mobile first) and being able to expand outwards to a large screen, using max-width will flow with that train if thought.

  For instance, font-size: 1em (at small screen) —> expand the screen past 500px wide triggers a possible media query:

  h1 { font-size: 1em; }

  @media (max-width: 500px) { h1 { font-size: 2em; } }

  The H1 starts a 1em, hits the break point and size is increased to 2em.

  Hope that helps for CSS.

  Don’t forget to go back and fix the warnings above, it’s really important to be 100% semantically correct.

  Marked as helpful

  0

  ---

  

  Smith•60

  @SmithAldumeloPosted about 2 years ago

  @satrop thank you so much for your feedback, i will make amends to my code.

  1
• 

  Lucas Costa•350

  @LucasNCostaPosted about 2 years ago

  Olá, meus parabens por ter concluído o desafio. Agora vamos as dicas.

  (<img src="img/barcode.png" width="250px" height="" alt="">) --> pode substituir por (<img src="img/barcode.png" alt="">) --> o "height" pode pagar e o "width" pode escrever no CSS.

  O "h2" pode substituir por "h1", se enquadraria melhor na situação.

  @media only screen and (max-width: 375px) and (min-width:1440px) --> o "max" e o "min" estão aplicados de maneira errada -- @media screen and (min-width:1440px) -- tente isso, creio que ira funcionar.

  <div class="main"> -- pode simplesmente usar o "main" substituindo a "div" e a classe pode nomear ela de acordo -- class="card"-- ou --class="container"--

  recomendo também a criação do "box-shadow" no ".main" pra dar uma sensação de sobreposição.

  para consultas pode utilizar: https://github.com/LucasNCosta/html-css/tree/main/treinar/qr-code-component

  Marked as helpful

  0

  ---

  

  Smith•60

  @SmithAldumeloPosted about 2 years ago

  @LucasNCosta thank you so much. i will correct my codes

  0