Text is not centered on small devices

Question

I am doing a front end challenge using HTML and CSS, In the website I have this text:

The above image Is a screenshot from a web view, I need to keep the text centered horizontally when you open the website on a mobile device.

Current output:

As you can see in the images, the smaller the screen will get the more the text will go to the left of the screen

Things that I have done so far:

I have seen here and here that I can do it like this:

  width:100%;
  display: flex;
  justify-content: center;

SO I have tried to do so:

<p class="top-paragprph colorWhite bold">All your files in one secure location,<br> accessible anywhere.</p>

.top-paragprph{
  font-size: 32px;
  width: 100%;
  display: flex;
  justify-content: center;
}

But it did not work for me.

From what I have been reading it seems like flex is the modern and easy way to do so, why on my example the text is not centered on a smaller screen size?

score 2 · Answer 1 · edited Jul 23 '21 at 07:27

2

Try adding text-align: center; or maybe if you are using bootstrap, add the class text-center your <p></p> tag

edited Jul 23 '21 at 07:27

Pola Eskandar

114
9

answered Jul 22 '21 at 10:23

Eugene

47
6

Thank you for the answer, but this did not solved my problem – Tamir Abutbul Jul 22 '21 at 10:26
I am not using bootstrap – Tamir Abutbul Jul 22 '21 at 10:34

score 2 · Answer 2 · answered Jul 22 '21 at 10:27

2

https://codepen.io/critingz/pen/PomJRov

.holder {
  display: flex;
  justify-content: center;
}

have a holder div that contains the text. The holder div can be display: flex;, justify-content: center;

answered Jul 22 '21 at 10:27

CritingZ

388
2
16

Thank you for answering but this did not solved my problem – Tamir Abutbul Jul 22 '21 at 10:35
you must have something else that breaks it in your code because that's a pretty common way for centering with flexbox and it works – CritingZ Jul 22 '21 at 10:41

score 2 · Answer 3 · answered Jul 22 '21 at 10:27

2

The display: flex; should go on a parent element, like so:

.container{
  width: 100%;
  display: flex;
  justify-content: center;
}

<div class="container">
<p class="top-paragprph colorWhite bold">All your files in one secure location,<br> accessible anywhere.</p>
</div>

Let me know if this works how you want it to.

answered Jul 22 '21 at 10:27

Rolv Apneseth

2,078
2
7
19

I have tried this but this did not fixed the problem – Tamir Abutbul Jul 22 '21 at 10:33
Could you describe the behaviour you expect? Add it to the question to help everyone out – Rolv Apneseth Jul 22 '21 at 10:39
If this was not clear - I need the text to be centered horizontally on small devices, as for now it just sticks to the left of the screen – Tamir Abutbul Jul 22 '21 at 10:41

score 2 · Accepted Answer · answered Jul 22 '21 at 10:42

2

Assuming that you want to center the paragraph and also that your navbar is also 100% I would guess that the image is going outside of your body element and making it looks like this is not centered. You can fix this by giving the image max-width: 100%;

answered Jul 22 '21 at 10:42

Saar Davidson

1,312
1
7
16

score 1 · Answer 5 · answered Jul 22 '21 at 10:36

1

p {
  width: max-content;
  margin: auto
}

Set width to p element and then set margin auto.

answered Jul 22 '21 at 10:36

Redberry57

36
4

Text is not centered on small devices

Things that I have done so far:

5 Answers5