Using flexbox, the two separate sentences that make up the page are in the middle. However, when I view the site on my phone the second sentence is aligned along the left side.
How the site looks on a phone
I’ve tried targeting the size using @media and center-align for specifically the second sentence unsuccessfully.
<!DOCTYPE html>
<html>
<head>
<title>Jefferson's Virginia</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html, body{
height: 100%;}
body {
background-color: #999;}
.wrapper {
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;}
p.one {
font-family: "Times New Roman", Times, serif;
font-size: 1.75em;
font-weight: bold;}
p.two {
font-family: "Times New Roman", Times, serif;
font-size: 1.75em;
font-weight: bold;}
</style>
</head>
<body>
<div class="wrapper">
<p class="one"> Jefferson's Virginia Website </p>
<br>
<p class="two"> In Process of Being Re-constructed </p>
</div>
</body>
</html>
>Solution :
You need to add "text-align:center" to the wrapper CSS to keep wrapped text centered even when it wraps
.wrapper {
text-align: center;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}