Hi all,
I’m currently working on the portfolio site assignment. I’ve been able to get my site the way that I’d like on desktop, and now I’m working on media queries for mobile. However, no matter what I attempt (set width to 100vw, 100%, etc), on mobile and only on mobile, my header does not take up the whole width of the screen, causing my resume link to sit awkwardly in the centre, as you can see. Does anyone know why this is happening and how to fix it?
And here’s my code:
<!DOCTYPE html>
<html>
<head>
<!--Designed and built w/💖 by ...-->
<title>Asher T. Parker | Full-Stack Engineer</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Raleway:wght@500&family=Ubuntu+Mono:wght@400;700&family=Varela&display=swap" rel="stylesheet">
<link rel="stylesheet" href='https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css' />
<link rel="stylesheet" href="resources/CSS/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<meta http-equiv="Content-type" content="text/html; charset=UTF-8">
</head>
<body>
<header>
<h3 class="fullName">...</h3>
<nav>
<a class='sectionLinks' href="#aboutMe">about</a>
<span class='navDivider'>|</span>
<a class='sectionLinks' href="#skills">skills</a>
<span class='navDivider'>|</span>
<a class='sectionLinks' href="mailto:a@ashertparker.com">contact</a>
<span class='navDivider'>|</span>
<a class='sectionLinks' href='#gitHubLink'>github</a>
<a class='resumeButton' href="resources/atpresume.pdf">RÉSUMÉ</a>
</nav>
</header>
<main>
<div class='hero' id='aboutMe' role="presentation">
<h1>
<span class='hello'>Hi,</span><br>
<span class='iAm'>I'm ...</span><span class='nameCommas'>,</span><br>
<span class='fullStack'>an aspiring full-stack engineer.</span>
</h1>
<p>
A former strategy consultant who couldn't help but be a builder.
Austin, TX based. Fascinated by full-stack, web3, and AR.
</p>
<a class='letsTalk' href="mailto:a@ashertparker.com">Let's Talk</a>
<div class='skills' id='skills' role='presentation'>
<img class='icons' src="./resources/Icons/javascript.svg" alt="JavaScript Icon" title='JavaScript'>
<img class='icons' src="./resources/Icons/html.svg" alt="HTML 5 Icon" title='HTML 5'>
<img class='icons' src="./resources/Icons/css3.svg" alt="CSS 3 Icon" title='CSS 3'>
<img class='icons' src="./resources/Icons/github.svg" alt="Github Icon" title='Git/Github'>
<img class='icons' src="./resources/Icons/npm.svg" alt="NPM Icon" title='NPM'>
<img class='icons' src="./resources/Icons/icons8-nodejs.svg" alt="Node.js Icon" title='Node.js'>
<img class='icons' src="./resources/Icons/terminal.svg" alt="Bash/CLI Icon" title="Bash/CLI">
<img class='icons' src="./resources/Icons/icons8-react.svg" alt="React Icon" title="React">
</div>
</div>
<div class='gitDiv' role="presentation">
<a class='gitHubLink' id='gitHubLink' href="https://github.com/asher-t-parker">https://github.com/asher-t-parker ------------</a>
</div>
</main>
<footer>
</footer>
</body>
</html>
* {
box-sizing: border-box;
}
html {
font-size: 22px;
max-width: 100%;
}
body {
color: hsl(180, 100%, 93%);
background-color: hsla(180, 100%, 10%, 1);
max-width: 100%;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 100%;
margin: 1.2rem .5rem;
}
.fullName {
margin: .5rem;
color: hsl(22, 95%, 53%);
font-family: Varela, sans-serif;
border-top: 1px solid hsl(180, 100%, 93%);
border-bottom: 1px solid hsl(180, 100%, 93%);
border-radius: 4%;
padding: .3rem 0;
}
nav {
display: flex;
align-items: center;
justify-content: space-between;
margin-right: .6rem;
color:hsl(22, 95%, 53%);
font-family: 'Ubuntu Mono', monospace;
width: fit-content;
}
.sectionLinks {
color:hsl(180, 100%, 93%);
margin: .7rem;
text-decoration: none;
}
.resumeButton {
padding: .6rem;
border: 2px solid hsl(22, 95%, 53%);
border-radius: 5px;
color: hsl(22, 95%, 53%);
text-decoration: none;
}
.hero {
width: fit-content;
height: fit-content;
padding: 0 1rem;
margin: 10% auto;
line-height: 2.6rem;
letter-spacing: .1rem;
}
.hello {
font-family: 'Ubuntu Mono', monospace;
font-size: 1.3rem;
color:hsl(22, 95%, 53%)
}
.iAm,
.fullStack {
font-family: Raleway, sans-serif;
}
.fullStack {
color: hsl(180, 38%, 70%);
}
.nameComma {
font-family: 'Ubuntu Mono', monospace;
}
p {
font-family: Varela, sans-serif;
max-width: 777px;
line-height: 1.7rem;
}
.letsTalk {
padding: 2%;
border: 2px solid hsl(22, 95%, 53%);
border-radius: 5px;
color: hsl(22, 95%, 53%);
line-height: 4.5rem;
text-decoration: none;
font-family: 'Ubuntu Mono', monospace;
font-weight: bold;
}
.skills {
margin-top: 4rem;
font-family: 'Ubuntu Mono', monospace;
display: flex;
justify-content: space-between;
}
.icons {
width: 2.5rem;
height: auto;
margin: .3rem;
}
.gitDiv {
display: flex;
justify-content: flex-end;
}
.gitHubLink {
color: hsl(180, 100%, 93%);
font-family: 'Ubuntu Mono', monospace;
text-decoration: none;
float: right;
}
@media only screen
and (max-width: 768px) {
nav .sectionLinks,
nav .navDivider {
display: none;
}
}
