four card feature section

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

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

  Acho que o jeito mais fácil de resolver esse problema do tamanho dos cards seria criando um container na class que tem o grid pra limitar o tamanho de todos os cards, tipo max-width: 1110px e color uma largura maxima pra todos cards tipo max-width: 300px desse jeito o tamanho deles fica padronizado. Pra melhorar a semantica vc pode substituir a div de todos os cards com article por exameplo.

  Aqui minha solução pro mesmo desafio caso vc queira usar como base:

  https://www.frontendmentor.io/solutions/4-card-feature-section-vanilla-css-custom-design-glassmorphism-35MDUfOBdt

  👋 Espero ter ajudado e continue no foco!

  Marked as helpful

  0
• 

  P

  Harm Intemann•590

  @ghintemaPosted over 2 years ago

  Hi Daniel,

  with respect to your question, why are the two cards in the middle smaller than the outer two cards... You created an 8-column grid and assigned three columns each for the outer ones and two columns for the middle ones. So isn't it obvious that way to be different sized? :) This should fix the problem: Chance the grid-column for .card--supervisor from 1/4 -> 2/4 and for card--calculator from 6/9 -> 6/8. It worked for me in the dev-tool.

  Hope I could've helped you! :)

  Marked as helpful

  0
• 

  P

  Harm Intemann•590

  @ghintemaPosted over 2 years ago

  Other part of the problem could be the sizing of the cards wich depend on the ch... I'm not fully familiar with the clamp-function. But I would try to assign a fixed with or %-width to all cards to make sure that all cards have the same width indepedently of there content...

  0