3
respostas

[Dúvida] Dúvida no challenge Decodificador de textos

Boa tarde, Estou finalizando o Challenge de Decodificador de textos e tenho uma dúvida é em relação a tag textarea que recebe o texto criptografado ou descriptografado. No mobile ele não está ajustando o tamanho de acordo com o texto preenchido e isso tá me incomodando bastante, pois o visual fica muito feio.

Insira aqui a descrição dessa imagem para ajudar na acessibilidadeVou deixar os códigos abaixo:

HTML - Section do local que recebe o texto criptografado

 <section class="saida__Do__Texto">
            <div class="retangulo">
                <textarea id="saida__Texto" class="saida__Do__Texto__Digitado" id="texto_criptografado" disabled ></textarea>
                <div class="textos__E__Img__Informativos">
                    <img class="img__Menino" src="./assets/High quality products 1 1.svg">
                    <h1 class="textos__Informativos__Titulo">Nenhuma mensagem encontrada</h1>
                    <p class="textos__Informativos__Paragrafo">Digite um texto que você deseja criptografar ou descriptografar.</p>
                </div>
                <!-- o botao abaixo esta com essa classe p/ aparecer somente depois que o usuario clique em um dos boto~es acima disponiveis -->
                <button id="botao__copiar" onclick="copiar__texto()" class="saida__Do__Texto__Botao__Copiar esconder">Copiar</button>
            </div>
        </section>

CSS - O código do css ficou bem extenso, não vai caber ele todo aqui, mas vou deixar um print do código: Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Insira aqui a descrição dessa imagem para ajudar na acessibilidadeInsira aqui a descrição dessa imagem para ajudar na acessibilidadeInsira aqui a descrição dessa imagem para ajudar na acessibilidadeInsira aqui a descrição dessa imagem para ajudar na acessibilidade Insira aqui a descrição dessa imagem para ajudar na acessibilidadeInsira aqui a descrição dessa imagem para ajudar na acessibilidade Insira aqui a descrição dessa imagem para ajudar na acessibilidadeInsira aqui a descrição dessa imagem para ajudar na acessibilidade

Desde já agradeço pela ajuda!

3 respostas

Olá Pedro!

Vou solicitar o mesmo que pedi em outro tópico, para esse caso também, por favor compartilhe o seu projeto via github ou drive. Vai facilitar e muito nos teste.

Fico no aguardo!

Boa tarde Victor, tudo bem?

Claro, o link da pasta do google drive:

https://drive.google.com/drive/folders/1W1YT392br2lD1jrtEOJ5Wp0USCZxnAR3?usp=drive_link

Olá Pedro!

Você pode tirar a sobreposição do botão, para que ele não fique sobre o botão, seu código CSS na linha 164, pode ficar assim:

.saida__Do__Texto__Botao__Copiar{
    width: 336px;
    height: 67px;
    font-size: 16px;
    border-radius: 24px;
    /* position: absolute; */
    bottom: 5%;
    cursor: pointer;
    border: 2px solid #0A3871;
    background-color: #ffffff;
    color:#0A3871;
    padding: 20px;
    margin-bottom: 20px;
}

Resultado:

Projeto funcionando

Espero ter ajudado e Reforço que em casos de dúvidas, conte sempre com o fórum da comunidade Alura! Bons estudos!

Sucesso

Um grande abraço e até mais!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!