non-responsive html text

Asked

Viewed 141 times

1

inserir a descrição da imagem aqui

Both the title <h1> as the paragraph <p> I can’t get him responsive.

Code:

#h1{
    color:#3396ff;
    position: absolute;
    left: 36%;
    top: 70px;
    text-align:center;
}

#p{
    position: absolute;
    top: 140px;
    left: 35%;
    text-align:center;
    font-weight:bold;
}
html css

  • Look about media queries, the percentage measure does not help much, because it is the percentage of pixels and not the actual screen size. https://www.w3schools.com/css/css3_mediaqueries_ex.asp

  • Diana there are some styles in your CSS that are seemingly unnecessary, see the details in my reply. But if you do not answer I will ask you to edit your answer with the full code so I can give you an accurate answer.

1 answer

3


Without the rest of the code it is difficult to be sure that this answer will suit you. But what I can say is that position:absolute with left:35% is not the ideal way, the way it is will hardly be aligned on all screens.

To align text in 90% of cases only one text-align:center will solve.

Example one with text-align:center

body {
    font-family: sans-serif;
}
#h1{
    color:#3396ff;
    top: 70px;
    text-align:center;
}
#p{
    top: 140px;
    text-align:center;
    font-weight:bold;
}
<h1 id="h1">Meu título aqui</h1>
<p id="p">Meu paragrafo aqui</p>

If the answer does not solve your problem leave a comment that I can help you. But then I’ll need you to edit your code with the full code so I can give you a more accurate answer.

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.