2

Eu criei um <h4>dentro de uma div da seguinte forma

   <div class="col-sm-12 divQuatro fundotransparente">
        <div class="container">
            <div class="row">
                <div class="col-sm-8">
                    <h4 class="mt-3" id="txt-ocurso">O QUE É O CURSO?</h4>
                    <p>O curso é um divisor de águas. Existe uma mulher hoje e,
                        haverá outra se aplicar tudo que será passado no curso
                        de automaquiagem Empodere-se. Você terá acesso a x
                        quantidade de aulas e mais 2 bônus que vão agregar
                        muito valor em outros aspectos pessoais em sua vida.</p>
                </div>
            </div>
        </div>
    </div>

O CSS do id do h4 está dessa forma:

    #txt-ocurso{
    font-family: 'Ubuntu', sans-serif;
    color:#9c376a;
    font-weight: 700;
    background-color: rgba(253, 250, 250, 0.548);
}

Com isso meu titulo esta ficando com o background-color dessa forma inserir a descrição da imagem aqui

E eu gostaria que ficasse dessa forma, seria possível inserir a descrição da imagem aqui

1 Resposta 1

2

As tags de header H1 a H6 são do tipo display: block, assim como uma div elas ocupam a largura total do container que estão dentro.

Pada corrigir isso coloque display: inline-block na tah H4, assim ela se comporta externamente com um elemento inline, mas internamente como um elemento block, dessa forma ela vai só ocupar o espaço do próprio conteúdo. Com padding vc pode ajustar para o texto não ficar colado no box-model

#txt-ocurso{
    font-family: 'Ubuntu', sans-serif;
    color:#9c376a;
    font-weight: 700;
    background-color: rgba(0, 0, 0, 1);
    
    display: inline-block;
    padding: 5px 10px;
}
<div class="col-sm-12 divQuatro fundotransparente">
    <div class="container">
        <div class="row">
            <div class="col-sm-8">
                <h4 class="mt-3" id="txt-ocurso">O QUE É O CURSO?</h4>
                <p>O curso é um divisor de águas. Existe uma mulher hoje e,
                    haverá outra se aplicar tudo que será passado no curso
                    de automaquiagem Empodere-se. Você terá acesso a x
                    quantidade de aulas e mais 2 bônus que vão agregar
                    muito valor em outros aspectos pessoais em sua vida.</p>
            </div>
        </div>
    </div>
</div>

2
  • 1
    Muito obrigada Hugo, excelente!
    – WPfan
    Commented 20/10/2020 às 19:49
  • @WPfan legal que deu certo ai, fico feliz em ter ajudado!
    – hugocsl
    Commented 20/10/2020 às 20:02

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .