I'm very new to coding but I decided to make a personal practice website. My page looks fine on my computer but when I view it on a phone or resize my page vertically, all of my content starts to overlap. How can I prevent it from overlapping?
I've read that it might be an issue with having position: absolute; in my code but I'm not sure how I would replace that.
<head>
<style>
.logo {
color: white;
font-size: 2em;
font-weight: bolder;
}
a:link {
color: white;
}
a:visited {
color: white;
}
body {
background-color: black;
color: white;
font-family: Arial, Helvetica, sans-serif;
display: block;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
}
.logosize {
font-size: 2em;
letter-spacing: -5px;
}
.lower-center {
position: absolute;
top: 55%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
line-height: 18px;
text-align: center;
}
.location-text {
font-size: 15px;
}
footer {
text-decoration: none;
font-size: 1em;
position: absolute;
bottom: 0;
width: 97%;
height: 4rem;
display: flex;
justify-content: center;
}
.footer ol {
display: flex;
list-style: none;
}
.footer ol li {margin: 1em;}
.footer ol li a{
text-decoration: none;
}
.footer ol li a:hover {color: rgb(83, 54, 150);}
</style>
</head>
<body>
<div class="centered logosize">
<p class="logo" id="typewriter">daniel m.</p>
</div>
<div class="lower-center location-text">
<p><span style='font-size:13px;'>📍</span>
las vegas
<br>web developer _ creator</p>
</div>
</body>
<footer class="footer">
<ol>
<li><a href="https://instagram.com/_ddmm"><img class="instagram-icon" src="images/instagram-icon.png"></a></li>
<li><a href="https://twitter.com/_DDMM"><img class="twitter-icon" src="images/twitter-icon.png"></a></li>
<li><a href="https://github.com/dannymaclaughlin"><img class="github-icon" src="images/github-icon.png"></a></li>
</ol>
</footer>
</html>First, make sure you have the below lines in the <head> tag:
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
These enable responsiveness.
Then, in the <body> tag:
<div class="logosize">
<span class="logo" id="typewriter">daniel m.</span>
</div>
<div class="lower-center location-text">
<span>
<span style='font-size:13px;'>📍</span>
las vegas
</span>
<span>web developer _ creator</span>
</div>
<footer class="footer">
<ol>
<li><a href="https://instagram.com/_ddmm"><img class="instagram-icon" src="images/instagram-icon.png"></a></li>
<li><a href="https://twitter.com/_DDMM"><img class="twitter-icon" src="images/twitter-icon.png"></a></li>
<li><a href="https://github.com/dannymaclaughlin"><img class="github-icon" src="images/github-icon.png"></a></li>
</ol>
</footer>
Notice, that <footer> should also be in the <body>. The rest code here is same, except that I've removed some unnecessary tags.
And finally changes in the CSS:
body {
background-color: black;
color: white;
font-family: Arial, Helvetica, sans-serif;
/* Instead of display: block; Add the below lines: */
height: 100vh; /* So body will have the full screen height */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
/* And the tags inside the body i.e. 2 divs and 1 footer - these will be aligned in a column and will be centered horizontally and vertically */
}
.centered {} /* No need of this */
.lower-center {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
/* With this, the 2 span's in this div will be aligned in a column and will be centered horizontally and vertically. */
}
It's better to add all title elements inside the vertically centered <div> to prevent overlap.
As you resize the screen, the centered <div> will reposition itself according to the changes made. But what's inside the <div> will be unchanged. Think of it like a component or a piece of a puzzle, you structure it as you desire and then the piece responds as a whole to the external changes.
Try the following snippet:
.logo {
color: white;
font-size: 2em;
font-weight: bolder;
}
a:link {
color: white;
}
a:visited {
color: white;
}
body {
background-color: black;
color: white;
font-family: Arial, Helvetica, sans-serif;
}
.centered {
display:inline-block;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
text-align:center;
}
.logosize {
font-size: 2em;
letter-spacing: -5px;
}
.lower-center {
position: absolute;
top: 55%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
line-height: 18px;
text-align: center;
}
.location-text {
font-size: 15px;
}
footer {
text-decoration: none;
font-size: 1em;
position: absolute;
bottom: 0;
width: 97%;
height: 4rem;
display: flex;
justify-content: center;
}
.footer ol {
display: flex;
list-style: none;
}
.footer ol li {margin: 1em;}
.footer ol li a{
text-decoration: none;
}
.footer ol li a:hover {color: rgb(83, 54, 150);}<body style="vertical-align: middle;">
<!--------- centered element -------->
<div class="centered">
<div class="logosize">
<span class="logo" id="typewriter">daniel m.</span>
</div>
<div class="location-text">
<p><span style='font-size:13px;'>📍</span>
las vegas
<br>web developer _ creator</p>
</div>
</div>
<!----------------------------------->
</body>
<footer class="footer">
<ol>
<li><a href="https://instagram.com/_ddmm"><img class="instagram-icon" src="images/instagram-icon.png"></a></li>
<li><a href="https://twitter.com/_DDMM"><img class="twitter-icon" src="images/twitter-icon.png"></a></li>
<li><a href="https://github.com/dannymaclaughlin"><img class="github-icon" src="images/github-icon.png"></a></li>
</ol>
</footer>Since you are aware of display: flex I would use that. It is definitely better than the position absolute approach because items in a flex box will not collide.
Here is the solution I came up with using Flexbox, note a few things:
.centered css declaration<div class="centered"> around the two divs that originally had a centered class<body> tag, so I moved the <footer> inside the body.logo {
color: white;
font-size: 2em;
font-weight: bolder;
}
a:link {
color: white;
}
a:visited {
color: white;
}
body {
background-color: black;
color: white;
font-family: Arial, Helvetica, sans-serif;
display: block;
}
.logosize {
font-size: 2em;
letter-spacing: -5px;
}
.centered {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
height: 100%;
}
.location-text {
font-size: 15px;
}
footer {
text-decoration: none;
font-size: 1em;
height: 4rem;
display: flex;
justify-content: center;
}
.footer ol {
display: flex;
list-style: none;
}
.footer ol li {margin: 1em;}
.footer ol li a{
text-decoration: none;
}
.footer ol li a:hover {color: rgb(83, 54, 150);}<html>
<head>
</head>
<body>
<section class="centered">
<div class="logosize">
<p class="logo" id="typewriter">daniel m.</p>
</div>
<div class="location-text">
<p><span style='font-size:13px;'>📍</span>
las vegas
<br>web developer _ creator</p>
</div>
<footer class="footer">
<ol>
<li><a href="https://instagram.com/_ddmm"><img class="instagram-icon" src="images/instagram-icon.png"></a></li>
<li><a href="https://twitter.com/_DDMM"><img class="twitter-icon" src="images/twitter-icon.png"></a></li>
<li><a href="https://github.com/dannymaclaughlin"><img class="github-icon" src="images/github-icon.png"></a></li>
</ol>
</footer>
</section>
</body>
</html>