Problems with viewport sizes

Web Development Front-End
,
1

Hi all, I’ve been revisiting the Tea Cozy project and have noticed that even though I’ve set the body to have a max-width of 1220px the viewport size is actually 1745px leaving a huge amount of space on the right hand side of the page. I’ve only started on the top header and navigation section, screen shots and code below. Hoping this is a simple fix but I can’t figure it out.

Screenshot 2024-05-23 at 13.18.33
Screenshot 2024-05-23 at 13.18.331746×303 62 KB

HTML (only the header section, all other tags html, body etc are correct)

<header>
        <div class="logo">
            <img src="./images/img-tea-cozy-logo.webp" alt="tea cozy logo">
        </div>
        <nav>
            <ul class="top-links">
                <li><a href="#">Mission</a></li>
                <li><a href="#">Featured Tea</a></li>
                <li><a href="#">Locations</a></li>
            </ul>
        </nav>
    </header>

CSS

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: Helvetica;
    font-size: 22px;
    width: 1220px;
    color: seashell;
    background-color: black;
    opacity: 0.9;
    text-align: center;
}

header {
    width: 100%;
    height: 69px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid seashell;
}


.logo {
    margin-left: 10px;
    display: inline-flex;
}

.logo img {
    /* width: 200px; */
    height: 50px;
}

nav {
    display: inline-flex;
}

.top-links {
    list-style: none;
    display: flex;
    justify-content: space-evenly;
    width: 350px;
}
2

Do you want the body to have a max-width of 1220px but be centered?

If so, I think you need to change width in the body selector to max-width and center the body content with margin: 0 auto.

3

Thanks, I tried applying both of those styles but there is still an excessive amount of space on the right side of the browser.
While I’m testing in Chrome and Safari (same results) I usually use Firefox so with check out their documentation.

KR

Mark

4

The screenshot below is what I get on a wide monitor with the HTML/CSS below (the logo doesn’t show because I haven’t downloaded it).

It’s the same as your code other than some added HTML boilerplate and using max-width and margin: 0 auto in the CSS.

If you use margin: 0 auto it should center the content horizontally so not sure why you’re not getting that result.

image
image4052×228 20.2 KB

HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Webpage</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <header>
      <div class="logo">
        <img src="./images/img-tea-cozy-logo.webp" alt="tea cozy logo" />
      </div>
      <nav>
        <ul class="top-links">
          <li><a href="#">Mission</a></li>
          <li><a href="#">Featured Tea</a></li>
          <li><a href="#">Locations</a></li>
        </ul>
      </nav>
    </header>
  </body>
</html>

CSS:

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: Helvetica;
  font-size: 22px;
  max-width: 1220px;
  margin: 0 auto;
  color: seashell;
  background-color: black;
  opacity: 0.9;
  text-align: center;
}

header {
  width: 100%;
  height: 69px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid seashell;
}


.logo {
  margin-left: 10px;
  display: inline-flex;
}

.logo img {
  /* width: 200px; */
  height: 50px;
}

nav {
  display: inline-flex;
}

.top-links {
  list-style: none;
  display: flex;
  justify-content: space-evenly;
  width: 350px;
}
5

Hi there!

Just wanted to pop in with some extra info.

It’s because your body has a max-width of 1220px that there is extra space to the right. Elements are initially aligned to the left unless manipulated otherwise with CSS. Because body has a smaller width than your screen (viewport), it will align to the left of the viewport.

I imagine you’re using 1220px on the body because future elements have a max-width of 1220px, but if you want the header to stretch across the screen, you’ll want to leave the width of body alone so that it can do so.

What you could do instead is something like this:

<body>
  <header>
  </header>
  <main>
    <section></section>
    .
    .
    .
  </main>
</body>

And use max-width and auto margins on main

main {
  max-width: 1220px;
  margin-inline: auto;
}

This way, the header can still stretch the entirety of the screen, and the inner content will be constrained and centered.

6

Awesome, I took your advice and removed any width from the body and header and as you explained the header takes up 100% of the available viewport.

Thanks for this great tip.

1 Like