3
respostas

Como alterar o botão de lugar

No primeiro cartão destaque, quando eu mudo pra desktop como eu alteraria a posição do botão "assistir agora" ele esta no começo da linha, eu queria colocar ele no final, já tentei usar o "justify-self: flex-end" na proprieda do "cartao__botao--destaque", tentei tbm na propriedade "cartao__botao--destaque::before" e tentei usar nas duas a o "align-self: flex-end".

Na imagem eu mostro onde quero que o botão fique. Insira aqui a descrição dessa imagem para ajudar na acessibilidade HTML da classe cartao destaque

Banner do cartao Banner do cartao

Vídeo em destaque

HZC - Título

Bruno Lopez

33 minutos

33 visualizações

CSS do @media do desktop

@media screen and (min-width: 1440px) { .cartao--destaque{ margin-bottom: 0; } .cartao__imagem--mobile{ display: none; } .cartao__imagem--desktop{ display: block; } .cartao--recentes { display: grid; grid-template-columns: auto auto; align-items: center; row-gap: 24px; width: 256px; padding: 16px; box-sizing: border-box; }

.cartao__botao--destaque{
    grid-column: auto;
    padding: 8px 16px;


}

.cartao--recentes .cartao__titulo {
    grid-column: auto;
}

.cartao__link {
    font-size: 0.8rem;
    font-weight: 600;
    color: #0480DC;
    justify-self: flex-end;
}

.cartao__lista {
    display: grid;
    row-gap: 16px;
    grid-column: span 2;
}

.cartao__item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 8px;
}

.cartao__item-thumbnail {
    width: 32px;
    grid-row: span 2;
}

.cartao__item-titulo {
    font-size: 0.9rem;
    line-height: 1.2rem;
    font-weight: 700;
}

.cartao__item-perfil {
    font-size: 0.8rem;
    color: #95999C;
}

}

3 respostas

Olá Gabriel.

Sugestão:

<div class='align-right'>
    <button class="cartao__botao cartao__botao--play cartao__botao--destaque">Assistir agora</button>
</div>

CSS:

.align-right{
    text-align: right;
}

Abraço.

Bom dia, eu fiz isso e o botão ainda não se mexeu.

Posta seu código html e css completo por favor.

Use o ícone acima </> para inserir o código separando assim:

html

depois

css

Abraço.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software