Olá Natan,
Conforme estávamos falando no outro fórum, após adicionar o banner do twitter no topo do shopping , a barra de rolagem na horizontal começou aparecer.
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Solucionado
Olá Natan,
Conforme estávamos falando no outro fórum, após adicionar o banner do twitter no topo do shopping , a barra de rolagem na horizontal começou aparecer.
Oi Eduardo, tudo bem?
Você consegue atualizar esse Jsbin colocando o HTML também, por favor?
Abcs!
Olá, estou com um problema parecido... Consegui deixar a caixa deitada e cruzar, mas ou ela fica escondida demais e aparece a barra de rolagem horizontal ou ela não preenche o espaço todo, fica como um quadrado mesmo... Alguma ideia? https://imgur.com/a/n1YEj (imagem de como está o layout)
<header class="titulo-principal">
<img class="foto-home" src="imagens/eu.jpg" alt="Foto de João da Silva">
<h1>João da Silva</h1>
<p class="subtitulo-principal">Desenvolvedor web</p>
<ul>
<li class="palavra-home eficiencia">Eficiência</li>
<li class="palavra-home boas-praticas">Boas práticas</li>
<li class="palavra-home codigo-limpo">Código limpo</li>
<li class="palavra-home css3">CSS3</li>
<li class="palavra-home html5">HTML5</li>
<li class="palavra-home javascript">JavaScript</li>
<li class="palavra-home acessibilidade">Acessibilidade</li>
<li class="palavra-home responsivo">Responsivo</li>
<li class="palavra-home otimizacoes">Otimizações</li>
<li class="palavra-home agilidade">Agilidade</li>
<li class="palavra-home design">Design</li>
</ul>
<a class="banner-twitter" href="twitter.com">Siga-me no Twitter</a>
</header>.inicio-post{
background-color:#F2FFFC;
position:absolute;
top:4em;
right:4em;
left:30%;
height:8em;
padding:1.5em;
color: #000;
}
.banner-twitter{
background-color:#3C1D3D;
color:white;
padding:0.5em 0;
box-sizing:border-box;
text-align:center;
text-decoration:none;
border:0.2em solid black;
font-size:1.2em;
font-family:"Open Sans Condensed", sans-serif;
position: absolute;
top: 0;
right: -3em;
transform-origin: 0 0;
transform:rotate(45deg);
width:10em;
}
.caminho-post{
background-color:#FFF;
padding:0.2em;
}
.palavra-home{
position:relative;
color:#D5447E;
font-family:"Shadows Into Light", cursive;
font-weight:bold;
}Desde já agradecido.
Oi Eduardo,
Olhei seu código e não encontrei o problema, mas tem uma solução rápida; overflow-x: hidden; lá na regra HTML.
Abcs!
Muito obrigado Natan.
Resolveu. =)