HTML/CSS grid layout text elements position

Question

I got a codepen I've been working on but cant seem to get the quote to correctly position one below the other. As you can see here the author gets placed to the side in the same grid cell. https://codepen.io/AngelCasas/pen/qXdGbd?editors=1100 html5:

    <blockquote class="phrase">
      <p style="font-size: 3vh">"The monotony and solitude of a quiet life<br> stimulates the creative mind"</p>
      <p>- Albert Einstein -</p>
    </blockquote><!-- End of quote -->

CSS:

    .phrase {
      grid-area: phrase;
      display: flex;
      justify-content: center;
      text-align: center;
      font-family: Cardo, serif, Arial;
      font-size: 1.5vh;
      color: #00264d;
      }

Is there any way I can get the text to flow down instead of sideways? Thanks in advance for any advice!

Looking at the codepen, I'm not sure I understand the problem. Would you mind expanding your description of the problem? What does this mean ... Is there any way I can get the text to flow down instead of sideways? — Troy Witthoeft
– Troy Witthoeft, Commented Jul 29, 2017 at 13:42
Sorry I updated the codepen and resolved the issue with the first answer but thanks for the help anyway! — Angel
– Angel, Commented Jul 30, 2017 at 20:07

Allman · Accepted Answer · 2017-07-29 13:34:30Z

1

remove display: flex; from the css and the next <p> will be placed below the previous one.

answered Jul 29, 2017 at 13:34

Allman

3002 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

jvitoroc · Accepted Answer · 2017-07-30 01:07:38Z

0

Add the property 'flex-direction' and set it to column:

.phrase {
      grid-area: phrase;
      display: flex;
      justify-content: center;
      text-align: center;
      font-family: Cardo, serif, Arial;
      font-size: 1.5vh;
      color: #00264d;
      flex-direction: column;
}

answered Jul 30, 2017 at 1:07

jvitoroc

3902 gold badges4 silver badges16 bronze badges

Collectives™ on Stack Overflow

HTML/CSS grid layout text elements position

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related