non-responsive text html

Question

non-responsive text html

Navigation

#1 by (3 votes)

1

Both the title <h1> and the paragraph <p> can not make you 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

asked by anonymous 24.03.2018 / 13:39

1 answer

How to change the style of a React component when you click a button? Problems with if doing 2 functions

score 3 · Accepted Answer

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

To align the text in 90% of cases, only a 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 I can help you. But then I need you to edit your code with the complete code so I can give you a more accurate answer.