product preview using html and css

Community feedback

• 

  Bernardo Poggioni•6,770

  @R3ygoski

  Posted over 1 year ago

  Olá marina, bom trabalho, desculpa responder depois de 10 dias da postagem, seu projeto ficou fiel ao mobile.

  Mas notei que você não fez o design de Desktop. Isso ocorre porque você limitou a sua <section> class="mobile", no css você colocou pra que ela tivesse 375px, isso não era necessário, já que você poderia ter feito ela ter 100% ou 100vw (tamanho total da largura da tela) e só precisaria centralizar o resto do conteúdo. E para fazer esse alinhamento, você só precisaria usar a propriedade de display: flex no CSS.

  Quando vamos criar um projeto que é para celular, tablet, laptops, desktops e tv's, nós não fazemos eles pensando no HTML, o que fazemos é, criamos a estrutura no HTML de acordo, e quando vamos estilizar utilizamos o media query para que possamos definir como o projeto deve se apresentar em cada tela.

  E uma outra dica, evite ao máximo usar caracteres especiais no seu HTML e CSS, pois podem dar conflito no JavaScript, ou seja, não usar ~ (til), ç, ã,õ, sempre focar em escrever sem esses caracteres para que não tenha problemas futuros. Dessa forma: em vez de descrição usaria descricao, em vez de preço usaria preco, e por aí vai.

  Novamente, parabéns por ter feito um projeto que ficou fiel ao mobile, se precisar de ajuda com qualquer coisa, pode comentar aqui que eu tentarei ao máximo te ajudar com o possível.

  00