need text to be under the title on not the side of the page-CodePudding

I need the text under to be under the the title/heading but the text is stuck on the left side of the page.

    <head>
    <script src="https://kit.fontawesome.com/725ade08c4.js" crossorigin="anonymous"></script>
    <style>

    body {
    padding: 0;
    margin: 0;
    background: #ffd200;
    }

    h1 {
    font-size: 10em;
    text-align: center;
    font-family: 'arial';
    }
    .p1 {
    font-family: 'serif';
    position: 80px 20px
    }
    </style>
    </head>
    <body>

    <div class="container">
    <a href="would be link"><i class="fas fa-home fa-2x"></i></a>
    </div>

    <h1>lorem ipsum</h1>

    <p class="p1">Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br> Nullam gravida a libero non pulvinar.
    Nunc mi mi, hendrerit nec rhoncus ac, luctus eget mi.<br>Praesent eget tristique sapien.
    Maecenas egestas leo vel consectetur placerat. </p>
    </body>

CodePudding user response：

Well, I think that in any case a page must have a maximum width if not you can't read it when it gets to wide. Either put your content inside a div to act like a column or use the <body> itself as the column and put the background color on the <html> element. Then you have to align your <body> in the middle with horizontal auto margins and with a width lower than the <html> itself. This width can be a pourcentage of the <html> width (which would be 80%) or it could be a pourcentage of the viewport width (which would be 80vw). Then you set a max width so that it stays readable.

Now the title and paragraph alignement is more complicated as it will depend on the content of the title and it's size. Typically if the title never changes (the name of your website) then it could be fixed in CSS. But if it's not fix then you'll need some JavaScript libraries to do some calculation.

Here's a solution if the title content is known:

The title font size is elastic, meaning that the font size depends on the width of the viewport. This will make the text always look the same size when you resize the page. We'll try to find a value so that the title takes all the horizontal space. This way we can align it on the left.
Once the page arrives at the maximal width (where we stop it growing) then the font size can be fixed. This is done with the help of the media query. The 1250px as limit is calculated depending on the other values. It should be the body's max-width devided by 0.8 (because of its 80% width). If you change the max-width and the width then you have to change the media query min-width value.

html {
  padding: 0;
  margin: 0;
  background: #ffd200;  
}

body {
  padding: 0;
  margin: 0 auto;
  width: 80%;
  max-width: 1000px;
}

h1 {
  font-size: 10em;
  text-align: left;
  font-family: "arial";
  /* Pull slightly to the left because the font is big and letters have margins. */
  margin-left: -.05em;
}

h1.elastic {
  font-size: 13vw;
}

@media screen and (min-width: 1250px) {
  h1.elastic {
    font-size: 10em;
  }
}

.p1 {
  font-family: "serif";
}

.top-left {
  position: absolute;
  left: 0;
  top: 0;
}

a, a:link, a:visited {
  color: #304f89;
}

a:hover, a:active {
  color: #01379d;
}

.top-left a {
  display: inline-block;
  margin: 0.25em;
}

<html>
<head>
    <meta charset="utf-8">
    <title>Page title</title>
    <script src="https://kit.fontawesome.com/725ade08c4.js" crossorigin="anonymous"></script>
<head>
<body>
  <div class="container top-left">
    <a href="would be link"><i class="fas fa-home fa-2x"></i></a>
  </div>

  <h1 class="elastic">lorem ipsum</h1>

  <p class="p1">Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br> Nullam gravida a libero non pulvinar.
    Nunc mi mi, hendrerit nec rhoncus ac, luctus eget mi.<br>Praesent eget tristique sapien.
    Maecenas egestas leo vel consectetur placerat. </p>
</body>
</html>

You can play with it on https://codepen.io/patacra/pen/XWaweyg

CodePudding user response：

There's no simple way of doing this. If you know the width of the title you can do:

.p1 {
  font-family: 'serif';
  width: 500px;
  margin: auto;
}

CodePudding user response：

You can use text-align

p1 {
    display: block;
    text-align: center;
}