Entrar Ainda não tem acesso?
1
resposta

[Dúvida] Botão de saiba mais e icones do card estão diferentes

Referente ao curso HTML e CSS: responsividade com mobile-first, no capítulo Integrando o Carrossel com SwiperJS e atividade Cards

por Angelo Alves de Oliveira
| 30.8k xp | 17 posts

Olá, estou fazendo o projeto de acordo com os videos, surgiram algumas difrenças no caminho, mas nada que me incomodasse. No entanto agora estou com um problema no botão de saiba mais e nos icones de favoritar e carrinho.

Não consigo alinhar os itens na parte esquerda do container e o botão de saiba mais esta com um padding muito grande na parte de baixo que não consigo diminuir. Insira aqui a descrição dessa imagem para ajudar na acessibilidadeAqui segue o projeto: https://github.com/AngeloxAlves/alurabooks

1 resposta
por Mike de Sousa
| 1899k xp | 3621 posts
Alura Scuba Team Suporte Educacional

Olá, Angelo. Tudo bem com você?

Falta dois ajustes no código:

  1. reset.css: Notei que falta o arquivo de reset no se projeto. Ele é importante para remover estilos que são aplicados por padrão pelos navegadores. Nessa aula a instrutora fala sobre e ensina como criar o arquivo e aplica-lo no seu projeto. Nesse link você pode copiar o código do reset.
  2. Ajuste do padding: No arquivo carrossel.css, você precisar fazer um ajuste no seletor .botões__ancora. Atualmente ele está aplicando um padding de 1em para cima, 2em para a direita, 0 para baixo e 2em para a esquerda, que é o que está causando esse efeito. Faça o ajuste para padding: 1em 2.2em; que é como a instrutora demonstra em aula, então o botão deve ficar corretamente estilizado.

Espero ter ajudado.

Siga firme nos seus estudos e conte com o fórum sempre que precisar.

Abraços :)

Caso este post tenha lhe ajudado, por favor, marcar como solucionado