Solucionado (ver solução)
Solucionado
(ver solução)
7
respostas

Variação de classes no responsivo com JS

Seguinte, estou criando uma interface de login para a empresa onde trabalho mas não consigo me acertar com o javascript,

eu preciso que quando chegue em um determinado tamanho de tela ele me acrescente a classe "W-75" do bootstrap para que o Card não fique tão pequeno Como poderia fazer isso?

7 respostas

Natan, boa tarde!

Primeiramente você precisa ver o tamanho da tela do dispositivo assim:

var tamanhoTela = window.innerWidth;

agora você precisa verificar se o tamanho é menor que o tamanho que você queira

if (tamanhoTela <= tamanhoQueVcQuer){
    var divLogin = document.querySelector('.card'); // Procurando o elemento que você quer alterar poderia procurar por id também
    divLogin.classList.add('W-75'); //Adicionando a classe 'W-75'
}

Espero ter ajudado e bons estudos!

Bom dia, infelizmente daquela forma não deu certo acrescentei o script da seguinte forma

    <script>

    var tamanhoTela = window.innerWidth;

    if (tamanhoTela <= 800){
        var divLogin = document.querySelector("#login"); // Procurando o elemento que você quer alterar
            divLogin.classList.add("w-75"); //Adicionando a classe 'W-75'
        }else{
            divLogin.classList.remove("w-75");
        }

    </script>

se referindo a essa div

                <div class="card" id="login">

mas ele está me retornando um erro na linha do remove e também tirando essa linha ele não acrescenta a class

Natan, boa tarde!

Você pode disponibilizar o código para que eu possa verificar?

https://gist.github.com/natan1506/303b31b6780026f15339bf3fb81b0524

esse é o link para o codigo completo

Natan, boa tarde!

Eu testei aqui, e percebi que você está chamando o script no topo da sua página antes mesmo de seus outros elementos carregarem, tente colocar o <script> antes da tag body fechar. E teste novamente, aqui funcionou qualquer coisa só perguntar

Espero ter ajudado e bons estudos!

solução!

infelizmente aqui continua sem funcionar, tentei alterar a validação mas também não funcionou, usei sem o else mesmo e deu certo, como não vai ter variação de resolução vou deixar sem até achar outra solução

Oi Natan tudo bem?

Poderia postar todo seu projeto no github e não só a página que está dando problema. Por gentileza, assim consigo analisar como um todo e não falta nenhuma referência.