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

Posted by Sam Allen
Sam Allen
7,176 Points

Entire page content shifting to right. Unsure why.

Pictures will do a better job of describing what's happening, so see these photos first:

  1. This is how the page displays in Firefox using dev tools to simulate the iPhone 7 viewport (no problems): https://ibb.co/hYmTaH

  2. This is how the page displays in Chrome using dev tools to simulate the iPhone 7 viewport (no problems): https://ibb.co/dcPvqH

  3. This is how the page displays in Google Chrome on my iPhone 7 (Firefox Focus looks the same, so it's not a browser issue, plus I've had other friends report the same when visiting http://samallen502.github.io on mobile devices): https://ibb.co/mXWBvH

(It's a little alarming to me that Firefox dev tools doesn't seem to be emulating iPhone 7's viewport accurately, by the way.)

I suspect this is a CSS issue, perhaps something to do with the .wrapper rules (padding at 2%?) or other elements having a width of 100%. However, I'm very new to coding, so I thought it best to consult with some more skilled developers on Treehouse, lest I get frustrated or waste time. Here's my current code repository: https://github.com/samallen502/samallen502.github.io

Alternatively, if you just want to take a gander at the HTML & CSS, respectively, right here, here it is:

<!DOCTYPE html>
<html lang="en-US">

<head>
    <!-- Metadata = data about data. Does not appear on-screen. Machine-readable only. -->
    <meta charset="utf-8">
    <meta name="keywords" content="Web Developer, Front End Web Developer, FEWD, Web Development, Front End Web Development, HTML, CSS, JavaScript, Louisville, Kentucky, Code Louisville">
    <meta name="description" content="Hire a Front End Web Developer trained by Code Louisville: Sam Allen of Louisville, Kentucky!">
    <meta name="author" content="Sam Allen">
    <!-- Maximize aesthetics for every viewport by setting the page-width to follow the screen-width of every device. Mobile-first. -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sam Allen | Louisville, KY</title>
    <link rel="shortcut icon" type="image/png" href="img/favicon.ico">
    <link rel="stylesheet" href="css/main.css">
</head>

<body>
    <header class="navBar">
        <nav class="wrapper">
            <h1 class="title">Sam Allen | Web Developer</h1>
            <input type="checkbox" id="hidden-checkbox">
                <label for="hidden-checkbox" class="menu-toggle"></label>
            </input>
            <ul class="menuOptions">
                <li><a href="https://github.com/samallen502?tab=repositories" target="_blank">Portfolio</a></li>
                <li><a href="#">Credibility</a></li> <!-- Feature Code Lou FEWD Cert and link to Treehouse. Feature testimonials and clients here in the future? -->
                <li><a href="#">Bio</a></li> <!-- Brief life story, explain career change, personal living situation, favorite podcasts, professional inspirations, shout-out to mentors, fun hobbies. Maybe make this interactive eventually? -->
                <li><a href="#">Business Inquiries</a></li> <!-- Opportunity for JavaScript! User can click nav button and a form pops up. -->
            </ul>                 
        </nav>
    </header>

    <div class="content" id="content">
        <div class="primary column">
            <h2>Primary column!</h2>
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
        </div>

        <div class="secondary column">
            <h2>Secondary column!</h2>
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
        </div>
    </div>

    <footer>
        <span>&copy;2018 Samuel Justin Allen</span>
        <!-- Add icons for LinkedIn and email later. -->
    </footer>  

    <!-- Typically, JavaScript will be referenced before the closing body tag so the page can at least load before executing the script per https://teamtreehouse.com/library/adding-data-to-arrays -->
    <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="js/app.js" type="text/javascript" charset="utf-8"></script> -->
</body>
</html>

/* Load normalize.css and font CDNs (removed from HTML for faster loading if user has cached). */
@import url('http://necolas.github.io/normalize.css/7.0.0/normalize.css');
@import url('https://fonts.googleapis.com/css?family=Julius+Sans+One');

/* ===========================================================================================
  Base Styles (how elements shoud look across all viewports unless overridden by media query)
=========================================================================================== */

body {
  background-color: #F8F8F8;
  color: #202020; /* Mobile users need more contrast than grey. */
  font-family: 'Julius Sans One', sans-serif;
  line-height: 1.3em;
  text-transform: none;
}

header {
  /* Next 3 lines fix header to top of screen and make header span the whole width of screen. */
  position: fixed;
  top: 0;
  min-width: 100%;
  background-color: #202020;
  color: #F8F8F8;
  box-shadow: 0px 3px 5px black;
  border-width: 20px;
}

nav {
  display: flex;
  justify-content: space-between;
}

nav h1 {
  font-size: 1.35em;
  display: inline-block;
  padding-top: 1em;
  margin-top: 0;
  margin-bottom: 0;
}

nav ul {
  list-style-type: none; /* Remove default bullet points. */
  padding-top: 0.3em;
  margin-bottom: 0em;
}

nav h1:hover,
nav ul a:hover {
  color: #C5B358;
}

footer {
  background-color: #202020;
  color: #F8F8F8;
  min-width: 100%;
  text-align: center;
}

/* ===========================================================================================
  Base Layout Styles (placement of columns, nav bars, etc.)
=========================================================================================== */

/* ---- Navigation ---- */

/* Center nav bar content on mobile devices until first min-width breakpoint kicks in. */
.wrapper {
  margin: 0 auto;
  padding: 0 2%;
  align-items: center;
}

@media (max-width: 768px) {  
  nav ul {
    background-color: #DCDCDC;
    display: block;
    height: 0;
    opacity: 0;
    text-align: center;
    /* Upon user toggle, transition height, opacity, and visibility. */
    transition: all 1s ease;
    width: 100%;
    visibility: hidden;
  }

  nav ul li {
    border-bottom: 2px solid #202020;
    color: #202020;
    display: block;
    font-size: 1.5em;
    padding: 2em 0;
  }

  nav ul li a {
    color: #202020;
    text-decoration: none;
  }

  #hidden-checkbox,
  .menu-toggle {
    display: none;
  }

  #hidden-checkbox:checked ~ ul {
    opacity: 1;
    height: 100vh;
    visibility: visible;
  }

  /* Style the label toggle to mimmick a menu icon. */
  .menu-toggle {
    background: linear-gradient(to bottom, #F8F8F8 0%, #F8F8F8 20%, transparent 20%, transparent 40%, #F8F8F8 40%, #F8F8F8 60%, transparent 60%, transparent 80%, #F8F8F8 80%, #F8F8F8 100%);
    cursor: pointer;
    display: block;
    float: right;
    height: 2em;
    margin-top: 1em;
    width: 2em;
  }

  .menuOptions {
    padding: 0;
  }

  .wrapper {
    display: block;
  }
}

/* ---- Layout Containers ---- */

.content {
  padding-top: 3.75em;
}

/* ===========================================================================================
  Media Queries (wide screen appearance stuff)
=========================================================================================== */

/* iPad has width of 768px, therefore anything wider than that will be first media query. Source: http://www.javascriptkit.com/dhtmltutors/cssmediaqueries2.shtml */

@media (min-width: 769px) {
  body {
    background-color: snow;
    color: grey;
    /* Next 3 lines force a sticky footer (along with ".content" "flex-grow" rule) by: (1) making all child elements flex items; (2) stacking all child elements vertically; and (3) making the body take up the entire height of the viewport */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
  }

  .wrapper {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .title {
    font-size: 1.25em;
  }

  #hidden-checkbox {
  display: none;
  }

  .navBar {
    background-color: grey;
    color: snow;
    font: bolder;
    padding: 1em 1.5em;
    box-shadow: 0px 3px 5px black;
    border-width: 20px;
  }

  .menuOptions {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }

  .content {
    padding-top: 6em;
  }

  footer {
    text-align: left;
    background-color: grey;
    color: snow;
    font: bolder;
  }

  a {
    color: snow;
    text-decoration: none;
  }

  ul li a {
    list-style: none;
    margin: 1em;
    font-size: 125%; /* Makes font size 125% of parent container. */
  }

  .menuOptions a {
    color: snow;
    text-decoration: none;
    font-weight: bold;
  }

  .content {
    flex-grow: 1;
  }

  /* ---- Float Clearfix ----
  .clearfix::after {
    content: " ";
    display: table;
    clear: both;
  } */
}

Thanks for any help you can provide! This may be a simple fix for a skilled mind. I'll be sure to award best answer and discussion points promptly.

Sam Allen
Sam Allen
7,176 Points

This gets even stranger. My local copy looks totally fine. I made some superficial changes to local master so I could push to GitHub in hopes of fixing GitHub's master. It still didn't work but at least I know GitHub is doing something to shift all content a bit to the right...hm...

Sam Allen
Sam Allen
7,176 Points

I just noticed this in Chrome dev when viewing http://samallen502.github.io: samallen502.github.io/:1 Mixed Content: The page at 'https://samallen502.github.io/' was loaded over HTTPS, but requested an insecure stylesheet 'http://necolas.github.io/normalize.css/7.0.0/normalize.css'. This request has been blocked; the content must be served over HTTPS.

This may be the solution! Fingers crossed...

Sam Allen
Sam Allen
7,176 Points

Nope. Still didn't fix it.

Chrome is still referencing 'http://necolas.github.io/normalize.css/7.0.0/normalize.css' yet that CDN was deleted from CSS in the last push. WEIRD. Is it because normalize.css (7.0), an old file that still hangs around in my directory, still exists? Wouldn't think so since it isn't "hooked up" within HTML. Will delete that file and and re-push.

Sam Allen
Sam Allen
7,176 Points

Okay, the page displays fine now. It looks like changing within CSS the CDN to normalize 8.0 using HTTPS was the fix and maybe there was just some latency in GitHub "showing" the pushed changes. Good to know that happens.

FYI, the old normalize.css hanging around in the directory as a file was a non-issue. As I said, I didn't expect it to be an issue given that the file wasn't "hooked up" within HTML.

2 Answers

Sam Allen
Sam Allen
7,176 Points

Within CSS, change:

/* Load normalize.css and font CDNs (removed from HTML for faster loading if user has cached). */
@import url('http://necolas.github.io/normalize.css/7.0.0/normalize.css');

to

/* Load normalize.css and font CDNs (removed from HTML for faster loading if user has cached). */
@import url('https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.css');

The https, not http, makes all the difference.

David Moorhead
David Moorhead
18,005 Points
David Moorhead
David Moorhead
18,005 Points

Yours is the first post I've read that shows the several steps toward the solution after defining a problem. I enjoyed the post a lot, and will particularly remember the differentiation of http and https. Gold stars to you for the effort and time!

David :)

Sam Allen
Sam Allen
7,176 Points

Thank you for the kind words! I agree that this thread captures the troubleshooting process for a developer fairly well. In fact, I added a link to this thread within the README file for my repository so that prospective employers can have some insight into my troubleshooting methodology.