Product preview card component main | HTML, CSS (FLEXBOX).

Community feedback

• 

  Lucas 👾•104,400

  @correlucasPosted about 2 years ago

  👾Fala Murilo, tudo bem? Parabéns pelo desafio!

  Cara eu fiz esse desafio com grid, acho que com flex complicou um pouco, meu conselho seria vc recomeçar a estrutura com GRID.

  Aqui o passo a passo:

  Para construir este componente com 2 colunas tudo o que você precisa fazer é criar um bloco principal para conter todo o conteúdo (você pode usar <main> para quebrar), defina seu width como max-width: 100px (é o tamanho do contêiner) e display: grid / grid-template-column: 1fr 1fr (isso significa que seu componente terá duas colunas com 50% da largura do contêiner cada uma é ** 500px**)

  👨‍💻 Aqui minha solução se vc quiser usar como base pra faze-la com grid: https://www.frontendmentor.io/solutions/product-preview-card-vanilla-css-and-custom-hover-state-on-hero-85A1JsueD1

  👋 Espero ter ajudado e continue no foco!

  Marked as helpful

  0

  ---

  

  Murilo Pita•60

  @murilopitaPosted about 2 years ago

  Confesso que não fiz por GRIP pois não tinha chegado ainda nesse tema nos meus estudos. Mas vou seguir o que tu disse e refazer a estrutura com GRID. Obrigado pela ajuda!

  Feedbacks assim que dá um animo pra gente não desistir! Muito obrigado meesmo!

  :D

  0

  

  ANDERSON BRUNO LOPES VALE•60

  @andersonBrunuPosted about 2 years ago

  @correlucas Realmente com o flex tem que ter uma atenção a mais nas tags filhos, eu fiz com flex pq ja tenho o costume de fazer com ele. e o grid eu comecei os estudos mais não terminei

  Marked as helpful

  0

  

  Murilo Pita•60

  @murilopitaPosted about 2 years ago

  @andersonBrunu eu fiz uns ajustes aqui e umas pesquisas com flexbox e consegui finalizar! Percebi que preciso praticar mais flexbox!

  A ideia do @correlucas de fazer em GRID vou pegar pra fazer quando começar a estudar GRID.

  1

  

  ANDERSON BRUNO LOPES VALE•60

  @andersonBrunuPosted about 2 years ago

  @murilopita Eu estudei bastante o flex pra entender o funcionamento de posicionamento, hoje ja faço sem dificuldade mas ele é resolve bastante coisa

  2