Skip to content
Submitted almost 3 years ago

four card feature section

Daniel•700
@DanielArzani
A solution to the Four card feature section challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

The middle two cards ended up being too small on desktop, its just that I ran out of space on my grid, I thought about making the cards smaller but it seemed kind of strange that the cards would be smaller on desktop than on mobile. Any suggestions would be appreciated.

Thanks

Code

Please log in to post a comment

Log in

Community feedback

  • Lucas 👾•104,160
    @correlucas

    👾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
  • P
    Harm Intemann•590
    @ghintema

    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
  • P
    Harm Intemann•590
    @ghintema

    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...

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord