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 Cole Smith
.a{fill-rule:evenodd;}techdegree
Cole Smith
Web Development Techdegree Student 13,802 Points

Header FlexBox Issues

I am having trouble with my .nav list items displaying correctly on larger screens (min-width:1024px). Instead of displaying the items in a row (side by side) they display as a column still... it might be a small syntax error that my eyes have missed but still I cant seem to figure this out. any help would be great thanks. My CSS and HTML markup:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Responsive Webpage</title>
    <link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/styles.css">
</head>
<body>
    <div class="main-header">
        <h1 class="name"><a href="#">Cole Smith</a></h1>
        <ul class="main-nav">
            <li class="nav-link"><a href="#">Home</a></li>
            <li class="nav-link"><a href="#">Portfolio</a></li>
            <li class="nav-link"><a href="#">Contact</a></li>
        </ul>
    </div>

    <header class="intro-unit">
        <img class="logo" src="img/profile-picture.svg" alt="profile picture">
        <div class="intro-text">
            <p>Hi, my name is Cole Smith I am an aspiring front/backend Web Designer! I am currently learning web design through Treehouse Tech and this is one of my projects.</p>
        </div>
    </header>

    <div class="intro-title">
        <h1>Portfolio</h1>
    </div>

    <main class="container">
        <div class="unit-1 unit">
            <img src="img/marketing.svg" alt=" image representing a marketing page">
            <h2>Marketing Page</h2>
            <p>This project shows the front page of a marketing website meant for specific business i'm interested in.</p>
        </div>
        <div class="unit-2 unit">
            <img src="img/search-app.svg" alt="image representing a travel webpage design">
            <h2>Search Page</h2>
            <p>This project searches through a specific database to find information that the user is trying to look up.</p>
        </div>
        <div class="unit-3 unit">
            <img src="img/travel-app.svg" alt="image representing a favorite spot-styled webpage">
            <h2>travel app</h2>
            <p>This project compares travel times based on different transportation methods and tells you the best one.</p>
        </div>
    </main>
    <div class="container-2">
        <div class="unit-4 unit">
            <img src="img/fav-spot.svg" alt="image representing a photo gallery webpage">
            <h2>Map of Favorite Spots</h2>
            <p>This project uses mapping apis to plot points for my favorite spots in the city for a do-it-yourself walking tour.</p>
        </div>
        <div class="unit-5 unit">
            <img src="img/photo-gallery.svg" alt="image representing a calculator webpage">
            <h2>Photo Gallery</h2>
            <p>This project shows pictures from a recent trip to the viewer and allows them to easily navigate through photos.</p>
        </div>
        <div class="unit-6 unit">
            <img src="img/calculator.svg" alt="Image representing calculator-styled page">
            <h2>Calculator</h2>
            <p>Someone can enter the numbers they want and press the big blue button and get the result.</p>
        </div>
    </div> 


    <footer class="main-footer">
        <div class="footer-div">
            <h3 class="footer-title">Contact</h3>
            <p>If you're interested in chatting or want more information about what i've been working on, i'd love to hear from you!</p>
            <p>Phone: 1 (303) 4040</p>
            <p>Email: cole.smith.code@gmail.com</p>
        </div>       
    </footer>
</body>
</html>

/* -- Base Element Styles -- */

* {
  box-sizing: border-box;
}
body {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  margin: 0;
}
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
h1 {
  color: lightslategray;
}
h2 {
  color: lightslategray;
}
h3,
a {
  color: lightslategrey;
}
a {
  text-decoration: none;
}
p {
  padding: 8px;
  padding-top: 15px;
  font-weight: 500;
}
.unit .p {
  font-weight: 500;
}
/* -- Base Layout Styles -- */
.main-header {
  background-color: cadetblue;
  padding: 15px 15px 15px 15px;
}
.name {
  font-size: 1.35em;

  margin: 0;
}
.intro-title {
  text-align: center;
  padding-top: 14px;
  padding-bottom: 8px;
}
.main-nav {
  margin-top: 5px;
}

.main-nav a {
  text-align: center;
  line-height: 2em;
  padding: 15px 15px 15px 15px;
}
.nav-link {
  font-weight: 700;
}
.container {
  text-align: center;
  padding-left: 25px;
  padding-right: 25px;
}
.container-2 {
  text-align: center;
  padding-left: 25px;
  padding-right: 25px;  
}
.logo {
  padding: 5px 5px 5px 5px;
}
/* -- Layout Containers -- */
h1 a {
  padding: 0px;
}
.intro-unit,
.main-footer {
  text-align: center;
}
.intro-unit {
 color: rosybrown;
 background: aliceblue;
 padding: 9px 9px 9px 9px;
 margin-top: 20px;
 margin-bottom: 9px;
 margin-left: 8px;
 margin-right: 8px;
}
.main-footer {
  color: floralwhite;
  background-color: cadetblue;
  padding: 14px 10px 11px 10px;
} 
.container {
  padding-right: 1em;
  padding-left: 1em;
}
.container-2 {
  padding-right: 1em;
  padding-left: 1em;  
}
.unit {
  padding: 10px 10px 10px 10px;
}
/* -- Media Queries -- */

@media (min-width: 768px) {
  .intro-unit,
  .container,
  .container-2 {
    width: 90%;
    margin: 0 auto;
  }
}
@media (min-width: 1024px) {
  .intro-unit,
  .container,
  .container-2 {
    width: 90%;
    max-width: 1150px;

  }  
}

/* -- Flex Box -- */

@media (min-width: 768px) {
  .main-header,
  .intro-unit,
  .container,
  .container-2 {
      display: flex;

  }
  .main-header {
    flex-direction: column;
    align-items: center;
  }
  .intro-unit {
      flex-direction: column;
  }
  .container,
  .container-2 {
      flex-direction: column;
      justify-content: space-around;
  }
}

@media (min-width: 1024px) {
   .main-header {
       flex-direction: row;
       justify-content: space-between;
   }
   .intro-unit {
     flex-direction: row-reverse;
   }
   .container,
   .container-2 {
       flex-direction: row;
       justify-content: space-around;
   }   
}

1 Answer

Blake Larson
Blake Larson
13,014 Points
Blake Larson
Blake Larson
13,014 Points

Just have to make sure .main-nav is display: flex and change it to row in the query.

.main-nav {
  margin-top: 5px;
  display: flex; 
  flex-direction: column; 
}

@media (min-width: 1024px) {
   .main-header {
       flex-direction: row;
       justify-content: space-between;
   }
  .main-nav {
    flex-direction: row; 
  }
   .intro-unit {
     flex-direction: row-reverse;
   }
   .container,
   .container-2 {
       flex-direction: row;
       justify-content: space-around;
   }   
}
Cole Smith
.a{fill-rule:evenodd;}techdegree
Cole Smith
Web Development Techdegree Student 13,802 Points

wow yep it was a small error haha. thank you very much