Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

andreawalkup
andreawalkup
2,365 Points
Posted by andreawalkup
andreawalkup
2,365 Points

Help centering nav

I'm a beginner, and I need help! My navigation menu looks centered on my desktop computer but when I view the site from my iPad the navigation skews slightly to the right. (Also slightly to the right on a mobile phone but I realize I should work on an entirely different menu for such a small screen anyway.) The rest of the site is centered properly on the iPad and phone. Here's the snippet of CSS.

nav {
  font-family: 'Quicksand', sans-serif;
  text-align: center;
  word-spacing: 1em;
  left: 0;
  right: 0;
}

nav li {
  display: inline-block;
  margin-left: 0;
  padding-left: 0;
}

Any suggestions welcome! I added the left, right, and margin-left, padding-left today after some Googling but that doesn't seem to have made any difference. Am I missing something?

Steven Parker
Steven Parker
231,248 Points
Steven Parker
Steven Parker
231,248 Points

It would help to see the whole code, as the final effect will be due to the interaction between the HTML and CSS, plus other CSS may be affecting these components.

If you're using the workspaces, a great way to show the entire project is to make a snapshot (note: not "screenshot") of your workspace and post the link to it here.

3 Answers

Steven Parker
Steven Parker
231,248 Points
Steven Parker
Steven Parker
231,248 Points

I did not use a real iPad, but I tried it using the iPad emulator in Chrome's developer tools. I was not able to replicate the issue, the position remained consistent across screen sizes.

None of the images were available, but since none seem near the nav area, I can't imagine they are causing any trouble. Have you tried it without the special fonts? Maybe they display differently on those devices.

andreawalkup
andreawalkup
2,365 Points
andreawalkup
andreawalkup
2,365 Points

Thank you for looking into it! I will try it out with a different font.

Serge Zant
Serge Zant
10,420 Points
Serge Zant
Serge Zant
10,420 Points

You could try:

nav { margin: 0 auto; }

Or:

nav { margin-left: auto; margin-right: auto; }

Goodluck!

andreawalkup
andreawalkup
2,365 Points
andreawalkup
andreawalkup
2,365 Points

Thanks for the tip! I will try it out.

andreawalkup
andreawalkup
2,365 Points
andreawalkup
andreawalkup
2,365 Points

OK so here's more detail then...

<!doctype html>
<html>
    <head>
        <title>Andrea's site</title>
        <link rel="stylesheet" href="main.css">
        <link href="https://fonts.googleapis.com/css?family=Shadows+Into+Light" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>

    <body>
      <header>

        <a href="index.html"><img id="logo" src="img/Alogo.jpg" alt="Letter A"></a>

        <nav>
          <ul id="navigation">
            <li><a href="index.html">Home</a></li>
            <li><a href="portfolio.html">Portfolio</a></li>
            <li><a href="about.html">About</a></li>
            <li><a href="contact.html">Contact</a></li>
          </ul>
       </nav>

      </header>

     <main>
        <h1 class="page-title">Contact</h1>
        <h2>I'd love to hear from you!</h2>  
        <p>Email me at <script language="JavaScript">

          var username = "hello";

          var hostname = "andreamadethis.com";

          var linktext = username + "@" + hostname ;

          document.write("<a href='" + "mail" + "to:" + username + "@" + hostname + "'>" + linktext + "</a>");

          </script>.</p>

          <!--from http://help.website-creator.org/customer/portal/articles/1409304-avoiding-spam-when-posting-an-email-address-->

        </main>


  <footer>

    <a href="http://www.instagram.com/" target="_blank"><img class="social-icon" src="img/instagram.png" alt="Instagram"></a>
  <a href="http://www.twitter.com/" target="_blank"><img class="social-icon" src="img/twitter.png" alt="Twitter"></a>
  <p><small>&copy; 2018 ABW</small></p>
  </footer>
  </body>

  </html>

And the full CSS:

@font-face {
    font-family: 'jelleeroman';
    src: url('fonts/jellee-roman-webfont.woff2') format('woff2'),
         url('fonts/jellee-roman-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

body {
  font-size: 1em;
  text-align: center;
  }

h1 {
  font-family: 'jelleeroman';
  font-size: 3.125em;
  color: deeppink;
  text-align: center;
  letter-spacing: 3px;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  font-family: 'Quicksand', sans-serif;
}

nav {
  font-family: 'Quicksand', sans-serif;
  text-align: center;
  word-spacing: 1em;
}

nav li {
  display: inline-block;
  margin-left: 0;
  padding-left: 0;
}

main {
  width: 75%;
  margin: auto;
  max-width: 960px;
  text-align: center;
  line-height: 1.5;
}

h2 {
  font-family: 'Shadows Into Light', cursive;
  color: darkorange;
  font-size: 1.875em;
  line-height: 1.3;
  }

p {
  font-family: 'Quicksand', sans-serif;
}

footer {
  font-family: 'Quicksand', sans-serif;
  text-align: center;
  margin-top: 40px;
}

a:link {
  color: darkorange;
  text-decoration: none;
  }

a:hover {
  color: deeppink;
  }

a:visited  {
  color: deeppink;
  text-decoration: none;
  }

.caption {
  margin-top: 0px;
  margin-bottom: 25px;
  font-family: 'Quicksand', sans-serif;
}

.list-head {
  margin-top: 0;
  margin-bottom: 0;
  padding-bottom: 0;
  }

.social-icon {
  border-radius: 20px;
}

.column {
    float: left;
    width: 33.33%;
}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}

#logo {
  display: block;
  width: 200px;
  height: 200px;
  margin-top: 30px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 30px;
  border-radius: 50%;
  }

#star,
#lightbulb,
#heart {
  width: 50px;
  height: 50px;
}

#skills li,
#services li,
#faves li
  {
  display: list-item;
  list-style-type: none;
  margin-left: 0;
  padding-left: 0;
  }

#skills ul,
#services ul,
#faves ul
  {
  margin-top: 0;
  padding-top: 0;
  margin-left: 0;
  padding-left: 0;
  margin-bottom: 20px;
  }

#portrait {
  border-radius: 10px;
  }

/* Index.html responsive layout - when the screen is less than 600px wide, make the three columns stack on top of each other instead of next to each other*/
@media screen and (max-device-width: 600px), screen and (max-width: 600px) {
    .column {
        width: 100%;
    }
}

/*Responsive image gallery from https://www.w3schools.com/css/tryit.asp?filename=trycss_image_gallery_responsive*/  
            div.gallery {
                border: 1px solid #ccc;
            }

            div.gallery:hover {
                border: 1px solid #777;
            }

            div.gallery img {
                width: 100%;
                height: auto;
            }

            div.desc {
                padding: 15px;
                text-align: center;
            }

            * {
                box-sizing: border-box;
            }

            .responsive {
                padding: 0 6px;
                float: left;
                width: 33.3333%;
            }

           @media screen and (max-device-width: 700px), screen and (max-width: 700px) {
                .responsive {
                    width: 49.99999%;
                    margin: 6px 0;
                }
            }

           @media screen and (max-device-width: 700px), screen and (max-width: 500px) {
                .responsive {
                    width: 100%;
                }
            }

            .clearfix:after {
                content: "";
                display: table;
                clear: both;
            }