Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Page responsive with HTML and CSS | Pagina responsiva com HTML e CSS

@BrunoleonardoDev

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


(PT-BR) Não consegui identificar o motivo de ter ficado uma borda na parte inferior da imagem.

(EN) I couldn't identify why there was a border at the bottom of the image.

Community feedback

Lucas 👾 104,580

@correlucas

Posted

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

Olhei seu código aqui e achei o jeito de solucionar o problema da imagem nao pegando o tamanho inteiro da coluna.

Eu sempre adiciono display: block e max-width: 100% pra minhas imagens pegarem sempre 100% da largura da div que elas estão dentro e a altura em automático.

Pra ter um ajuste melhor, você pode usar object-fit: cover pra deixar a imagem ainda mais responsiva com o efeito de cropping.

.image img {
    display: block;
    width: 100%;
    border-radius: 0.8rem 0 0 0.8rem;
}

👋 Espero ter ajudado e continue no foco!

Marked as helpful

0

@BrunoleonardoDev

Posted

Vou tentar isso. obrigado!

1

Please log in to post a comment

Log in with GitHub
Discord logo

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