Foto de Marco J.
Marco há 1 ano
Enviada pelo
Site

Parte branca ao lado direito do meu site, como resolvo?

Quando eu tento acessar o site pelo celular, aparece uma parte branca a direita, tem algum jeito de remover isso?

Segue meu codigó abaixo:


<body>
   
    <div class="header">
        <nav>
            <ul>
                <li><a href="#container1">Home</a></li>
                <li><a href="#container2">Drones</a></li>
                <li><a href="#container3">Últimos lançamentos</a></li>
                <li><a href="#container4">Peças</a></li>
                <li><a href="#container5">Promoções</a></li>
                <li><a href="#container6">Contato</a></li>
            </ul>
        </nav>

        <h1>Drones|MRBJ</h1>

    </div>
   
    <div class="container bg-image-1 hero" id="container1">
        <h2>Procurando um drone?</h2>
            <h3>Aqui temos os melhores! Confira já nossos modelos!</h3>
   
    </div>

    <div class="container-card bg-color-1" id="container2">
        <div class="card-itemtitulo title">
            <h4>Drones</h4>
            </div>
        <div class="card-item2">
        <h4>DJI Avata</h4>
        <img src="./imagens/Drone 10.png" alt="Imagem do DJI Avata">
        </div>
        <div class="card-item">
            <h4> Descrição </h4>
            <h5> Voo imersivo e intuitivo, ágil, compacto, protetores de hélices integrados, nitidez de gravação, captura suave, sistema GPS e gravações em até 4K.</h5>
            <h6>R$7.000,00 ou 12x de R$583,33 sem juros </h6>
            <h6>R$6.650,00 com PIX (-5%)</h6>
            <a href="#container2" class="btn">Comprar
                <i class="fa-solid fa-cart-shopping carrinho" style="color: #8ab9ff;"></i></a>
        </div>
        <div class="card-item2">
            <h4> Dji Mini 2 SE </h4>
            <img src="./imagens/Drone 9.png" alt="Imagem do Dji Mini 2 SE">
        </div>
        <div class="card-item">
       
                <div class="card-item2">
                    <h4>Dji Air 2S Fly More Combo</h4>
                    <img src="./imagens/Promoção 2.png" alt="Imagem do Dji Air 2S Fly More Combo">
                    </div>
                    <div class="card-item">
                        <h4> Descrição </h4>
                        <h5> Ideal para fotográfia áerea em movimento, mais de um bilhão de cores, tira fotos em formato RAW e sistema de segurança AirSense.</h5>
                        <h6> De R$16.000,00 por R$13.600,00 (-15%) ou ainda 12x de R$1.133,00 sem juros </h6>
                        <h6>R$12.920,00 com PIX (-5%)</h6>
                        <a href="#container5" class="btn">Comprar
                            <i class="fa-solid fa-cart-shopping carrinho" style="color: #8ab9ff;"></i></a>
                    </div>
                    <div class="card-item2">
                        <h4>Dji Tello Boost Combo</h4>
                        <img src="./imagens/Promoção 3.png" alt="Imagem do Dji Tello Boost Combo">
                        </div>
                        <div class="card-item">
                            <h4> Descrição </h4>
                            <h5> Resolução de vídeo em 720p e fotos em 5MP, velocidade máxima de 8 m/s, altitude máxima de 100 metros e autonomia de voo por até 13 minutos.</h5>
                            <h6> De R$1.000,00 por R$700,00 (-30%) ou ainda 12x de R$58,33 sem juros </h6>
                            <h6>R$665,00 com PIX (-5%)</h6>
                            <a href="#container5" class="btn">Comprar
                                <i class="fa-solid fa-cart-shopping carrinho" style="color: #8ab9ff;"></i></a>
                        </div>
    </div>

    </div>

    <div class="container bg-color-5" id="container6">
        <div class="card-itemtitulo title2">
            <h4>Contato</h4>
            </div>
            <div class="card-item3">
                <a href="#container6" class="btn2">
                    <i class="fa-brands fa-whatsapp fa-2xl" style="color: #8cff00;"></i></a>
                <h4>(+55) 11 98040-8875</h4>
                </div>
                <div class="card-item3">
                    <a href="#container6" class="btn2">
                        <i class="fa-solid fa-phone fa-2xl" style="color: #000000;"></i></a>
                    <h4>(+55) 11 96347-9786</h4>
                    </div>
                    <div class="card-item3">
                        <a href="#container6" class="btn2">
                            <i class="fa-solid fa-envelope fa-2xl" style="color: #ffffff;"></i></a>
                        <h4>Dronesmrbj@gmail.com</h4>
                        </div>
                            <div class="card-item3">
                                <a href="#container6" class="btn2">
                                    <i class="fa-brands fa-twitter fa-2xl" style="color: #71a5fe;"></i></a>
                                <h4>@DronesMRBJ</h4>
                                </div>
    </div>

    <script src="./js/scroll.js"></script>
   
</body>

</html>
CSS agora:
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Lato', sans-serif;
}

html {
    scroll-behavior: smooth;
    max-width: 100%;
}
img {
    height: 250px;
    width: auto;
}

a {
    color: var(--color-light);
    text-decoration: none;
    font-size: 18px;
    font-weight: 700;
    transition: .7s;
}
 

h4 {
    color: var(--color-light);
    font-size: 22px;
    font-weight: 700;
    text-align: center;
}

h5 {
    color: var(--color-light);
    font-size: 16px;
    font-weight: bold;
    text-align: justify;
}

h6 {
    color: var(--color-light);
    font-size: 16px;
    font-weight: 400;
}
   
body { overflow-x: hidden; }

.container {
width: 100vh;
height: 101vh;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-attachment: scroll;
}

.bg-image-1 {
background-image: url(../imagens/Fundo\ 1.jpg);
transition: .4s;
animation: changeBackgroundImage 16s infinite;
}


   


.bg-color-1 {
    background-color: var(--color-blue);
}
.bg-color-2 {
    background-color: var(--color-blue);
}
.bg-color-3 {
    background-color: var(--color-blue);
}
.bg-color-4 {
    background-color: var(--color-blue);
}
.bg-color-5 {
    background-color: var(--color-blue);
}
.carrinho {
    font-size: 16px;
    margin-left: 5px;

 
Professor Lauro S.
Identidade verificada
  • CPF verificado
  • E-mail verificado
Respondeu há 1 ano
Contatar Lauro Robson
Tá bom de os administradores do site banirem essas pessoas. serem mais rígidos. Está difícil continuar no Profes com tanto spam.

Um professor já respondeu

Envie você também uma dúvida grátis
Ver resposta
Envie uma dúvida grátis
Resposta na hora da Minerva IA e de professores particulares
Enviar dúvida
Professor Marcos T.
Identidade verificada
  • CPF verificado
  • E-mail verificado
Respondeu há 1 ano
Contatar Marcos
?

Um professor já respondeu

Envie você também uma dúvida grátis
Ver resposta
Vou testar e te retorno, qualquer coisa entre em contato comigo pelo privado para sanar mais dúvidas de programação

Um professor já respondeu

Envie você também uma dúvida grátis
Ver resposta
Professor Demétrius G.
Identidade verificada
  • CPF verificado
  • E-mail verificado
Respondeu há 1 ano
Contatar Demétrius

Na verdade, prof, este é um código HTML, não um spam. O complicado é que parece que o pessoal não muda a matéria. Vem dúvida desde gastronomia até engenharia aeroespacial pra área de "matemática".

Um professor já respondeu

Envie você também uma dúvida grátis
Ver resposta
Professor Matheus L.
Respondeu há 1 ano
Contatar Matheus

Boa noite meu caro...

 

neste trecho de código aqui

container {
width: 100vh;
height: 101vh;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-attachment: scroll;
 
na verdade é assim
 
container {
width: 100vw;
height: 101vh;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-attachment: scroll;
}
 
o valor da atributo width do elemento container é dada em vw. vh é para height.
 
Mas continue assim, você está no caminho certo!!!

Um professor já respondeu

Envie você também uma dúvida grátis
Ver resposta
Professor Marco S.
Respondeu há 1 ano
Contatar Marco Antonio

isso é aula de programação..............

Um professor já respondeu

Envie você também uma dúvida grátis
Ver resposta
Minerva IA
do Profes
Respostas na hora
100% no WhatsApp
Envie suas dúvidas pelo App. Baixe agora
Precisa de outra solução? Conheça
Aulas particulares Encontre um professor para combinar e agendar aulas particulares Buscar professor