Why the text is not centered in mobile devices (HTML)

Question

Here is the HTML code

<!DOCTYPE html>
<html lang="en">
<head>
  <link href="https://fonts.googleapis.com/css2?family=PT+Sans+Narrow:wght@700&display=swap" rel="stylesheet"
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href = "boi.css">
</head>
<body>
  <div class="first">
    <h1>Hey!</h1>
</div>
</body>
</html>>

and this is the CSS code

body {
background-color: rgb(20, 18, 18);
}
.first {
    position: relative;
    margin-right: 300px;
    color: white;
        text-align: center;        
        font-family: 'PT Sans Narrow', sans-serif;
}

score 0 · Accepted Answer · answered Sep 22 '20 at 17:57

0

use following css

.first
{
   color: white;
   text-align: center;
}
.first h1
{
   display: inline-block;
}

answered Sep 22 '20 at 17:57

Zain Ul Abideen

389
7
25

what is inline-block though? – Imagine Gaming Play Sep 22 '20 at 18:01
1

https://developer.mozilla.org/en-US/docs/Web/CSS/display – avia Sep 22 '20 at 18:02
Code-only answers are discouraged on Stack Overflow because they don't explain how it solves the problem. Please edit your answer to explain why this code fixes the problem on mobile when it was already working on desktop, so that it is useful to the OP as well as other users with similar issues. – FluffyKitten Sep 22 '20 at 18:28

Roman Gavrilov · Answer 2 · 2020-09-22T18:08:28.510

Hey There are many solutions.

You can set width of element like the below code.
Or You can set the display: options into the element (for example, display:contents)

body {
background-color: rgb(20, 18, 18);
}
.first {
    position: relative;
    margin-right: 300px;
    color: white;
    text-align: center;        
    font-family: 'PT Sans Narrow', sans-serif;
    width: 100%;
    /* display: contents; */
}

<link href="https://fonts.googleapis.com/css2?family=PT+Sans+Narrow:wght@700&display=swap" rel="stylesheet"
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href = "boi.css">
<body>
  <div class="first">
    <h1>Hey!</h1>

why do I have to use display when there is **** – Imagine Gaming Play Sep 22 '20 at 18:02 — Imagine Gaming Play, Sep 22 '20 at 18:02

Albenis Kërqeli · Answer 3 · 2020-09-22T18:40:14.060

You can use flexbox especially in media queries for mobile size or desktop size

.first {
    position: relative;
    margin-right: 300px;
    color: white;
    width:100%;
       display:flex;
justify-content:center;
align-items:center;
        text-align: center;        
        font-family: 'PT Sans Narrow', sans-serif;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <link href="https://fonts.googleapis.com/css2?family=PT+Sans+Narrow:wght@700&display=swap" rel="stylesheet">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href = "boi.css">
</head>
<body>
  <div class="first">
    <h1>Hey!</h1>
</div>
</body>
</html>

if you want to make text center on vertical align , you shold give a height to the div — Albenis Kërqeli, Sep 22 '20 at 18:35

score 0 · Answer 4 · answered Sep 22 '20 at 19:02

0

I think you just need to remove your margin-right: 300px; - that's going to end up moving everything 300px to the left, thus leaving it very off-center on mobile.

answered Sep 22 '20 at 19:02

rpie3

146
5

yeah that i will try it – Imagine Gaming Play Sep 23 '20 at 09:31

Why the text is not centered in mobile devices (HTML)

4 Answers4