Flex box mis alignment on Phone resolution

Question

I have a flex box which comes very nicely on the PC/Tab. But when loaded on a phone, it's getting distorted. To test this I opened the code in chrome by reducing the size of chrome window to around 1080px as thats the size of a phone. I could see the misalignment as shown in the below code pen screen shot:

The alignment even when on lower resolutions should be like below-

Any inputs are appreciated! Below is the code pen-

https://codepen.io/chandeeparora19/pen/oNxBNqL?editors=1100

.headlineContainer{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;

}

#myPhoto{
  max-width:250px;
}

#myPhoto>img{
  max-width: 100%;
}

#myHeadline{

  list-style-type: none;
  padding: 0.9%; /*add - remove space*/
}

#myHeadline li{
  display: flex;
  /*border: 2px solid gray;*/
  justify-content: center;
}

#myHeadline #name{
   color: #008080;
     font-size: 340%;
     font-weight: 300;
     font-style:normal;
}

#myHeadline #Tagline{
  font-size: 150%;
    color:#000000;
}

add text-align: center; to #name – Temani Afif Aug 23 '20 at 18:26 — Temani Afif, Aug 23 '20 at 18:26

score 0 · Accepted Answer · answered Aug 23 '20 at 18:27

0

Just need to add this:

#myHeadline {
    text-align: center;
}

Flex can center elements, but not the text alignment itself.

answered Aug 23 '20 at 18:27

dantheman

1,801
2
6
13

score 0 · Answer 2 · answered Aug 23 '20 at 18:36

0

In fact, everything is very simple. The problem is not centering, but the problem is the large font-size: 340% in #myHeadline #name. Make the value less through media queries and your problem will be solved.

answered Aug 23 '20 at 18:36

s.kuznetsov

14,440
3
9
22

I thought that the author wanted to keep this text in one line, so I suggested a solution with a reduced text size! – s.kuznetsov Aug 23 '20 at 18:41

Flex box mis alignment on Phone resolution

2 Answers2