Header won't take full width of screen on mobile

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;
    }
}

Hi,
did you really set the header to width: 100%;? Because currently the html, body and header have a property of max-width. What is you change all 3 to width rather than max-width?

What does it look like if you add a red border to the header element and a yellow to the body?

please ignore the changing text; I’m in the midst of a separate addition (adding changing adjectives before ‘full stack’ with anime.js)

My assumption is that the row with the icons in the footer is too large. Can you take it out for testing? What happens then?
If it is not that, then take out another item which also exceeds the body until you find the element.

I didn’t. It’s just experience with the tedious process of debugging. That’s how I would narrow it down until I find the perpetrator. Adding borders is a very helpful technique.

Adding max-width to .skills should fix the issue.

1 Like

I’ve set a max-width to .skills, but that doesn’t seem to solve it. I am, however, able to get the body to actually take up the full width of the browser on mobile when I use width: fit-content (but this makes little sense to me, as it doesn’t take the full width with width: 100%?). Doing so, however, makes the body too small on desktop. I could media query and just use fit-content only for mobile, but I’m wondering if that’ll make my code look a little too hacky/as if I don’t know what I’m doing :sweat_smile:

I truly appreciate all of your help, btw

1 Like

You are welcome :slight_smile:
Just one more property to add to .skills: flex-wrap: wrap; allows the children (the icon images) to break to another line if the is no space left. You don’t need to do anything with the body and no further media queries necessary.