layout ficou diferente iphone 6/7/8 | Layouts Responsivos: trabalhando com layouts mobile

Solucionado (ver solução)

Solucionado
(ver solução)

2
respostas

por Marcos Vinicios Linhares Da Silva

| 13.9k xp | 20 posts

a linha do padding-bottom fica em cima do titulo aplicativos na medida mais na versão desktop esta normal

Insira aqui a descrição dessa imagem para ajudar na acessibilidade base.css: :root { --branco: #FFF; --azul-claro: #DFE3E5; --vermelho-forte: #B72E2E; --cinza-escuro: #4F4C4C; --cinza-claro: #F7F4F4; --cinza-medio: #D9D9D9;

--fonte-link: #0084FF;
--fonte-cinza: #666;
--borda-cabecalho-mobile: #103D4A;
--bg-rodape: #333;
--bg-chamada-mobile: #00161C;

--planos-cartao-start: #56CCF2;
--planos-cartao-ultra: #B04CD9;
--planos-cartao-mega: #E33B3B;

--montserrat: 'montserrat' , sans-serif;

}

body { font-family:'Open Sans' , sans-serif; }

.container { padding-right: 6%; padding-left: 6%; }

.botao { text-align: center;

display: block;

box-sizing: border-box;

padding: 1rem 2rem;

border: 1px solid var(--branco);
border-radius: 5px;

}

2 respostas

por Gabriel S. Eidt

| 36.6k xp | 30 posts

19/01/2022

Creio que nesta aula o instrutor criou um css padrão (nesse caso base.css) e após isso começou colocar as propriedades em outro arquivo css, nesse trecho seria a respeito do arquivo "chamada.css" se eu não estiver enganado.

A estilização ficou da seguinte forma para esta parte:

.chamada  {
    display: flex;
    flex-direction: column;
    align-items: center;

    color: #FFF;
    text-align: center;

    background-color: #00161C;

    padding-top: 12.25rem;
    padding-bottom: 2.5rem;
}

.chamada__titulo {
    font-family: var(--montserrat);
    font-size: 2rem;
    font-weight: 700;
    text-transform: uppercase;

    margin-bottom: 1.5rem;
}

.chamada__texto {
    font-size: 1.25rem;
    line-height: normal;

    margin: 0 auto 2.5rem;
}

.chamada__botao {
    width: 100%;
}

Além disso, analise se você acrescentou as classes corretamente (olhar seu código HTML).

HTML:

<section class="chamada container">
            <h1 class="chamada__titulo">Aplicativos Na Medida</h1>
            <p class="chamada__texto">Apeperia tem um jeito inovador de comparar e montar aplicativos para pequenas e médias empresas.</p>
            <a href="#" class="chamada__botao botao">Conheça os planos</a>
</section>

Caso não for essa a resolução, poste seu código do css, tamo junto.

solução!

por Marcos Vinicios Linhares Da Silva

| 13.9k xp | 20 posts

21/01/2022

solução alterar o valor do padding-top de 12.25rem para 13.25rem dentro do css chamada.css assim:

.chamada  {
    display: flex;
    flex-direction: column;
    align-items: center;

    color: var(--branco);
    text-align: center;

    background-color: var(--bg-chamada-mobile);

    padding-top: 13.25rem;
    padding-bottom: 2.5rem;