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

Leonard Morrison
PLUS
Leonard Morrison
Courses Plus Student 32,914 Points
Posted by Leonard Morrison
Leonard Morrison
Courses Plus Student 32,914 Points

Building my website layout through flexbox.

I'm currently creating my website with a responsive layout. I'm using the Flexbox class as my guide. For some reason when I build my website and when I use Chrome's Developer Tools, the media queries don't display. I used the media first query and everything.

Here's the code:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" href="css/normalize.css">
  <meta charset="utf-8">
  <title>Leban Mohamed</title>
  <link href="https://fonts.googleapis.com/css?family=Merriweather" rel="stylesheet">
  <script src="https://use.fontawesome.com/53cf439673.js"></script>
</head>
<body>
  <header class="header">


    <nav>
      <a href="main-en"><h1>Leban Mohamed</h1></a>
      <H2>Software Developer</H2>
      <ul>
        <li><a href="about-me.html">About Me</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">JavaScript Projects</a></li>
      </ul>
    </nav>
    </div>


  </header>
  <div class="clearfix">

    <div class="self-intro">
      <h3>Welcome to my website!</h3>
        <p>
          Salutations! My name is Leban Mohamed. I will soon graduate from the Northern Alberta Institute of Technology (NAIT).
          This is where I keep some of my portfolio pictures. I can develop in C#, Swift, Java, Ruby, Python, PHP, just to name a few.
          I've even created this website with some HTML, CSS and the occasional JavaScript.
          I was even able to create some mobile applications for Android and iOS.
        </p>
    </div>

    <div class="portfolio">

<h5>Android Projects</h5>
      <ul>

        <li>

          <figure>
            <img src="img/nintendo-facts.png" alt="This app is a basic android app that displays random factoids about Nintendo.">
            <figcaption>
              This app is a basic android app that displays random factoids about Nintendo.
            </figcaption>
            </figure>
        </li>

        <li>
          <figure>
            <img src="img/watton.png" alt="This application is batton and stopwatch in one, hence the name Watton">
            <figcaption>
              This application is batton and stopwatch in one, hence the name Watton.
            </figcaption>
          </figure>
        </li>

      </ul>

  <h4>iOS Projects</h4>
      <ul>

        <li>

          <figure>
            <img src="img/quiz.png" alt="This iOS quiz was build using Swift. I created this app as means to test my iOS skills.">
            <figcaption>
              This iOS quiz was build using Swift. I created this app as means to test my iOS skills.
            </figcaption>
          </figure>

        </li>
      </ul>

<h5>.NET Projects</h5>
      <ul>

        <li>

          <figure>
          <img src="img/ETools.png" alt="This project was a Co-operative one between me and a school colleague">
          <figcaption>
           My final project for .NET. Note that this was a collabrative effort with me and colleague.
          </figcaption>
          </figure>

        </li>

      </ul>




      </ul>
    </div>


    </div>


</body>
<footer>
  <div class="copy">
  &copy; 2017 Leban Adbullahi Mohamed
  </div>
<ul class="footer">
  <li><a href="https://twitter.com/LebanAMohamed"><i class="fa fa-twitter-square" aria-hidden="true"></i></a></li>
  <li><a href="https://www.reddit.com/user/SuperBigL/"><i class="fa fa-reddit-alien" aria-hidden="true"></i></a></li>
  <li><a href="https://github.com/TheBigL"><i class="fa fa-github" aria-hidden="true"></i></a></li>
  <li><a href="mailto:leban.mohamed@live.ca?subject=inquires"><i class="fa fa-envelope" aria-hidden="true"></i></a></li>
</ul>



</footer>

</html>

/*
============================
Base Layout Styles
============================
*/

html
{
  box-sizing: border-box;
}

.name
{
  text-decoration: none;
}


/*
============================
Base Styles
============================
*/

/*---- Body ----*/
body
{
  padding-top: 2.5rem;
}

/*----  Header ----*/
.header
{
  background-color: rgb(236, 101, 101);
  width: 100%;
  text-align: center;
  top: 0;
  position: fixed;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

html
{
  font-family: 'Merriweather', serif;
}

/*----  Navigation ----*/
nav
{


width: 100%;
margin-left: 1em;
margin-right: 1em;
display: block;

}







nav ul li:nth-child(3)
{
  order: -1;
}







.container
{
  width: 100%;
}


/*---- Self Introduction----*/



.self-intro
{
  text-align: center;
  padding-left: 1em;
  padding-right: 1em;
  padding-top: 5em;
  display: flex;
  flex-direction: column;
  justify-content: center;

  width: 100%;



}

.self-intro p
{
  align-self: center;
  max-width: 500px;
}

/*---- Portfolio----*/
.portfolio ul
{
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}


.portfolio ul li
{
  flex: 1 700px;
  list-style: none;


}

/*----  ----*/
.clearfix::after {
        content: " ";
        display: table;
        clear: both;
    }
/*----  Footer ----*/
footer
{
  text-align: center;
  background-color: rgb(236, 101, 101);
  bottom: 0;
  position: relative;
  width: 100%;
  padding: 2em 0;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);

}

footer ul li
{
  font-size: 3rem;
}

.footer
{
  display: inline-flex;
  flex-direction: column;
}

footer li
{
  list-style-type: none;
  display: inline;
  margin: 2.5em 1.5em;
}

/*
============================
Image Stylings
============================
*/

img
{
  width: 100%;
  margin: 2.5%;
  border: 1px solid rgb(0, 0, 0);
}





/*
============================
Link Stylings
============================
*/
a
{
  text-decoration: none;
}

a:link
{
  color: rgb(0, 0, 0);
}

a:hover
{
  color: rgb(0, 0, 0);
}

a:visited
{
  color: rgb(0, 0, 0);
}




/*
============================
Media Queries
============================
*/


@media (min-width:769px)
{

.header
{
  display: flex;
  flex-direction: row;
}

.header h1
{
  margin-right: 1.5em;
  margin-left: 1.5em;
}



nav ul
{
  list-style: none;
  display: flex;
  flex-direction: row;
  justify-content:space-around;
  flex-wrap: wrap;
  flex-grow: 1;
}

nav ul li
{
  align-self: center;
}



.portfolio
{
  flex-wrap: wrap;
  flex-direction: row;
}

.portfolio ul
{
  flex-direction: row;

}

.portfolio ul li
{
  flex-grow: 1;
  flex-basis: 400px;
  max-width: 500px;
  flex-wrap: wrap;
}

.portfolio ul li:nth-child(2)
{
  margin-bottom: 1.5em;
}









.footer
{
  flex-direction: row;
  justify-content: center;
}

  nav
  {
    padding-bottom: 1em;
  }









  img
  {
    width: 100%;
  }

  img:nth-child(3)
  {
    width: 45%;
  }

  .portfolio ul li figure
  {
    text-align: center;
  }

}

Is there something wrong with Google Chrome? Is something up with my code? Please tell me. Thank you in advance.

1 Answer

Zack Lee
PLUS
Zack Lee
Courses Plus Student 17,662 Points
Zack Lee
Zack Lee
Courses Plus Student 17,662 Points

It has to do with the order you've linked your stylesheets. You set normalize after your custom css so normalize rules are overriding your custom css. Your fonts should come first, then normalize, followed by custom css. Css is order specific, styles that come later in a sheet take precedence.