5
respostas

Banner expandindo a página

Meu código está dessa forma, porém quando eu vejo como está minha página index, percebo que ela criou um scroll lateral, a parte que deveria estar oculta do baner simplesmente rotacionou e "empurrou" a página. Não identifiquei qual o problema, podem informar o que devo pesquisar para resolver esse problema?

.baner-siga-me-no-twiter{
    width: 10em;
    line-height: 1;
    padding: 1em 0;
    box-sizing: border-box;

    text-align: center;
    text-decoration: none;
    background-color: #3C1D3D;
    color: white;
    border: .25em solid black;

    font-size: 1.2em;
    font-family: "Open Sans condensed", sans-serif;

    position: absolute;
    top: 0;
    right: 0;

    transform-origin: 0 0;
    transform: translate(6.5765em, -2.4745em) rotate(45deg);
}
5 respostas

Olá Vinicius.

Esta situação já havia sido respondida no fórum.

Veja se as orientações do outro questionamento te ajudam a resolver.

https://cursos.alura.com.br/forum/topico-dupla-barra-de-rolagem-24895

Olá, estou com o mesmo problema. Mesmo consultando as orientações do link acima, o problema ainda continua...

Por algum motivo o elemento após rotacionar e fazer o translate fica além do conteúdo da página. Há alguma forma de informar que este "pedaço" do elemento deve ser ignorado, como se não estivesse ali?

Conseguimos remover o espaço extra adicionando um overflow-x: hidden no elemento pai do banner (no meu caso na tag header)

<header class="titulo-principal" style="overflow-x: hidden;">

Coloquei o CSS inline por conveniência, mas quem preferir pode inserir o atributo overflow na classe header no arquivo CSS.

Olá, o meu aconteceu o mesmo e o banner ficou enorme, tive que de diminuir o font-size para 0.4em. Sendo que o código foi copiado. E usando a dica do João Paulo a barra desapareceu.

A dica do João Paulo está certa mas a maneira mais correta seria incluir:

.titulo-principal {
    overflow: auto;
}