In F12 when I drag the responsive page, I noticed that the header is sticking out of the body page when I resized it down to mobile size. Do you know why it would be causing the issue for the text to stick out like that?
Lastly, I noticed my header title is not staying centered when resizing my mobile after I put in a letter-spacing element into my header.
Don't know what is going on with my header here.
Here are my html and css
*{
box-sizing: border-box;
}
body {
width: 100%;
height: 100%;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
/* The header section */
.header {
padding: 80px;
text-align: center;
background: #ccccff;
}
.header h1 {
font-size: 68px;
font-family: "Lucida Console", Monaco, monospace;
letter-spacing: 10px;
}
/* The main content section */
.content {
padding: 10px;
background: #e6e6e6;
}
.content h2 {
text-align: center;
}
.content p {
margin: 30px;
}
/* Three equal columns */
/* Create three equal columns that floats next to each other */
.column {
float: left;
width: 33.33%;
padding: 10px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* This is the footer section */
footer {
width: 100%;
height: 100%;
padding: 50px;
text-align: center;
background: lightgreen;
}
/* Responsive design starts here */
@media only screen and (max-width: 768px) {
.column {
width: 100%;
}
}
<!DOCTYPE html>
<html>
<head>
<title>Title Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<!-- This is a header -->
<div class="header">
<h1>Website Title</h1>
<p>Dolor sed veniam minim eiusmod sint labore elit lilamco dolor in in dolor clipa occaecat do.</p>
</div>
<!-- This is the main content -->
<div class="content">
<!-- About section -->
<h2>About</h2>
<p>
Lorem ipsum clipa nlila tempor amet dolor clipa magna commodo minim. Sed ut lilamco veniam est esse tempor in anim excepteur lilamco excepteur deserunt ad. Lorem ipsum tempor eiusmod nisi consectetur magna cupidatat in ad velit clipa aliqua id sunt clipa nlila aliqua laboris.
</p>
<!-- 3 column responsive layout -->
<div class="row">
<div class="column" style="background-color:#aaa;">
<h2>Column 1</h2>
<p>
Magna velit dolor esse magna ut sed cillum magna lilamco nisi ut. Qui labore in sed ea excepteur clipa laboris pariatur irure fugiat fugiat dolor qui. Velit aliquip fugiat eu ea dolor velit proident veniam consectetur ut dolor clipa sunt incididunt veniam duis nisi tempor.
</p>
<ul>
<li>Skill 1</li>
<li>Skill 2</li>
<li>Skill 3</li>
<li>Skill 4</li>
<li>Skill 5</li>
</ul>
</div>
<div class="column" style="background-color:#bbb;">
<h2>Column 2</h2>
<p>
Magna velit dolor esse magna ut sed cillum magna lilamco nisi ut. Qui labore in sed ea excepteur clipa laboris pariatur irure fugiat fugiat dolor qui. Velit aliquip fugiat eu ea dolor velit proident veniam consectetur ut dolor clipa sunt incididunt veniam duis nisi tempor.
</p>
<ul>
<li>Skill 1</li>
<li>Skill 2</li>
<li>Skill 3</li>
<li>Skill 4</li>
<li>Skill 5</li>
</ul>
</div>
<div class="column" style="background-color:#ccc;">
<h2>Column 3</h2>
<p>
Magna velit dolor esse magna ut sed cillum magna lilamco nisi ut. Qui labore in sed ea excepteur clipa laboris pariatur irure fugiat fugiat dolor qui. Velit aliquip fugiat eu ea dolor velit proident veniam consectetur ut dolor clipa sunt incididunt veniam duis nisi tempor.
</p>
<ul>
<li>Skill 1</li>
<li>Skill 2</li>
<li>Skill 3</li>
<li>Skill 4</li>
<li>Skill 5</li>
</ul>
</div>
</div>
</div>
<!-- This is the footer -->
<div class="footer">
<footer>
Person Name © 2019
</footer>
</div>
</body>
</html>
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
