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

Parte branca ao lado direito do meu site

Informática:

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

Segue meu codigó abaixo:

<!DOCTYPE html>
<html lang="pt-br">
<head>
 
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap" rel="stylesheet">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
    integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw=="
    crossorigin="anonymous" referrerpolicy="no-referrer" />

    <link rel="shortcut icon" href="./imagens/camera-drone.png" type="image/x-icon">

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DronesMRBJ</title>
   
    <link rel="stylesheet" href="./css/variables.css">
    <link rel="stylesheet" href="./css/styles.css">
    <link rel="stylesheet" href="./css/header.css">
    <link rel="stylesheet" href="./css/hero.css">
    <link rel="stylesheet" href="./css/button.css">
    <link rel="stylesheet" href="./css/cards.css">
    <link rel="stylesheet" href="./css/title.css">
    <link rel="stylesheet" href="./css/responsivo.css">
   
</head>

<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>Aqzui 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>

    <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;
}

a:hover {
    color: var(--color-orange);
    font-size: 19.5px;
}

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;

}

.btn:hover .carrinho{
animation: carrinho .7s infinite;
}

.active-scroll {
    background-color: rgba(52, 76, 124, 0.6);
    width: 50%;
}

@keyframes carrinho {
    50% {
        transform: translateX(3px);

    }
    100% {
        transform: translateX(0);
}
}
@keyframes changeBackgroundImage {
    25% {
      background-image: url(../imagens/Fundo\ 2.jpg);
      transition: .4s;
    }
    50% {
        background-image: url(../imagens/Fundo\ 4.jpg);
        transition: .4s;
    }
    75% {
        background-image: url(../imagens/Fundo\ 3.jpg);
        transition: .4s;
    }
    100% {
        background-image: url(../imagens/Fundo\ 1.jpg);
        transition: .4s;
    }
  }
 
Professor Marcos T.
Identidade verificada
  • CPF verificado
  • E-mail verificado
Respondeu há 1 ano
Contatar Marcos
fale com o suporte.

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
Você pode tentar inspecionando e ao clicar você pode deletar o correspondente ao erro, fazemos o mesmo para anúncios indesejados em sites no meu grupo de alunos de programação. Para mais dúvidas só entrar em contato comigo no privado.

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

é spam.

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