The website seems to be mobile friendly but the text seems to be non-readable on mobile. Whenever I open it up on mobile, the text is vertical nor does the bottom border or footer show up.
While this is my first time building a website from scratch, I think it's because my footer CSS is ambiguous meaning the border does not show on mobile and maybe I need to include a span tag on my text. I am just unsure.
Here is my CSS and HTML:
.wrap {
margin-top: 50px;
margin-bottom: 50px;
margin-left: 125px;
margin-right: 125px;
max-width: 1000px;
}
html {
overflow-x: hidden;
overflow-y: hidden;
}
body {
background-color: #fbfbf8;
font-family: menlo, 'andale mono', 'courier new', sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
section {
line-height: 1.5;
padding: 70px 20px;
}
/* Introduction (ಠ_ಠ)
---------------------- */
.introduction p {
color: #000000;
}
.introduction p.name {
color: lightgray;
font-size: 18px;
}
.introduction p.current {
color: lightgray;
font-size: 18px;
}
.introduction p.elsewhere {
color: lightgray;
font-size: 18px;
}
.introduction h1 {
color: #000000;
}
.introduction a {
color: #000000;
text-decoration: underline;
}
.introduction a:hover {
color: lightgray;
text-decoration: none;
}
/* Footer ¯(°_o)/¯
---------------------- */
.footer {
position: fixed;
min-width: 100%;
margin-left: -10px;
height: 50px;
background-color: lightyellow;
}
.footer p {
color: black;
font-size: 14px;
text-align: center;
margin-top: -15px;
margin-left: 125px;
margin-right: 125px;
max-width: 1000px;
}
.footer a {
color: black;
text-decoration: underline;
}
.footer a:hover {
color: black;
text-decoration: none;
}
.leftSideBar{display:none !important;}
.rightSideBar{display:none !important;}
@media screen and (min-width:640px) {
}
<!DOCTYPE html>
<html>
<head>
<title>Bobby Wilson</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="/assets/style.css" media="screen" rel="stylesheet" type="text/css">
</head>
<body>
<section class="introduction">
<div class="wrap">
<p class="name">Name:</p>
<p>Bobby Wilson</title>
<p class="current">Currently:</p>
<p>Founder and CEO of something, eventually.</p>
<p class="elsewhere">Elsewhere:</p>
<p>You may <a href="" target="_top">email me</a> or find me on <a href="">Twitter</a>, <a href="">Tumblr</a>, <a href="">LinkedIn</a>, and <a href="">Treehouse</a>.</p>
</div>
</section>
<section class="footer">
<p>The website is currently under construction. Here is a <a href="https://www.youtube.com/watch?v=jgEOSSwEsPE"> lovely video</a> to make up for it. <br>I best be off then. Please be well and do not worry much. Cheers!</p>
</section>
</body>
</html>
Thank you!
Aucun commentaire:
Enregistrer un commentaire