Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
8
respostas

Tamanho e posição banner Twitter

Referente ao curso HTML5 e CSS3 II: Turbinando as suas páginas, no capítulo Transformações e atividade Banner do Twitter

por Gabriela Guerra
| 27.1k xp | 4 posts

Segui as instruções do exercício, mas meu banner ficou muito grande. Vi em outra questão enviada no fórum que o width 14em seria muito grande, utilizei outros valores e ainda assim não consegui o resultado esperado (ex: com width menor, o banner é deslocado para a direita e some da visão do usuário). Poderiam me ajudar por favor?

Segue a imagem de como meu banner ficou e o código:

https://ibb.co/B4FX5dy

html{
    overflow-x: hidden;
}
body {
    overflow-x: hidden;
}
.banner-twitter {
    width: 14em;
    line-height: 1em;
    padding: 1em 0;
    box-sizing: border-box;

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

    font-size: 1em;
    font-family: "Open Sans Condensed", sans-serif;

    position: absolute;
    top: 0;
    right: 0;
    transform-origin: 0 0;
    transform: translate(6.5754em, -2.4749em) rotate(45deg);
}
8 respostas
por Instrutor
| 1136.9k xp | 1471 posts
Instrutor

Gabriela, boa tarde!

Poderia disponibilizar o seu projeto para que possamos verificar melhor o problema?

por Gabriela Guerra
| 27.1k xp | 4 posts

Claro Felipe! https://uploadfiles.io/ck660

Obrigada pela resposta.

por André Victor Ruiz Pedroso
| 2102.7k xp | 3838 posts
Moderador Analista Pleno

Oi Gabriela tudo bem?

Tentei baixar e não consegui o arquivo tá com 0 bytes. Poderia usar o github (é bom que você já treina usar ele porque as empresas pedem muito) para colocar a pasta do seu projeto, por gentileza.

por Gabriela Guerra
| 27.1k xp | 4 posts

Oi André, obrigada pela resposta.

Desculpa o link anterior e obrigada pela dica do Github. Espero que tenha conseguido fazer o upload dessa vez. Os CSS estão em outra branch.

https://github.com/guerragabi/HTML5-e-CSS3

por André Victor Ruiz Pedroso
| 2102.7k xp | 3838 posts
Moderador Analista Pleno

Disponha.

Não tem problema o link anterior estar com problema, acontece.

O upload no github veio ok, para vir toda a estrutura de pasta ao invés de clicar em "choose your files", simplesmente arraste os arquivos do Windows Explorer para o retângulo cinza do github na página de upload.

Eu dei uma olhada no seu código e não achei o erro ainda. Amanhã (hoje tecnicamente) eu, ou o Felipe (quem conseguir primeiro rsrsrs) damos uma olhadinha melhor.

Aqui está o fork do seu repositório com as pastas corretas https://github.com/neoandrevictor/HTML5-e-CSS3/tree/master2

solução!
por André Victor Ruiz Pedroso
| 2102.7k xp | 3838 posts
Moderador Analista Pleno

Bom dia!

O que acontece é que todas as palavras do header .titulo-principal estão com font-size: 60px; então todos elementos filhos dele estão com a letra muito grande, isso que tá fazendo o banner do twitter ficar grande demais. Tira o font-size do titulo principal e põe um personalizado para cada filho que queira mudar o tamanho da letra.

site.css

.titulo-principal {
    font-family: "Open Sans Condensed", "Arial", sans-serif;
    text-align:center;
    color:#FFFFFF;
    background-color:#851944; 
    padding: 25px;
    border-bottom: 10px solid #000000;
    font-size: 60px;
    text-transform: uppercase;
}

Espero ter ajudado!!!

por Gabriela Guerra
| 27.1k xp | 4 posts

Valeu André!! Nem sei quantas coisas tentei e nem pensei em olhar o site.css. Ficou perfeito agora!! :D

por André Victor Ruiz Pedroso
| 2102.7k xp | 3838 posts
Moderador Analista Pleno

Disponha e bons estudos!!!