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

Jeriah Bowers
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Jeriah Bowers
Front End Web Development Techdegree Graduate 20,590 Points
Posted by Jeriah Bowers
.a{fill-rule:evenodd;}techdegree seal-36
Jeriah Bowers
Front End Web Development Techdegree Graduate 20,590 Points

FlexBox

Can anyone help me with this flexbox issue? The content in the .main-col div isn't working properly. The form seems to be breaking container or being made really narrow. I'll post the CSS and HTML I am using scss on this project so the css won't look great.

HTML

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Circles UI Kit</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/styles.css">
  </head>
  <body class="container">

    <div class="grid__row">
      <div class="grid__col--3">
        <div class="main-nav">
        <a class="link" href="/">
          <img class="img--logo" alt="circles logo" src="images/logo.png">
        </a>
      <div class="grid__col--9">
        <nav class="centered" role="navigation">
          <ul class="nav">
            <li class="nav__item"><a href="#type">Typography</a></li>
            <li class="nav__item"><a href="#buttons">Buttons</a></li>
            <li class="nav__item"><a href="#forms">Form</a></li>
            <li class="nav__item"><a href="#images">Images</a></li>
            <li class="nav__item"><a href="#grid">Grid</a></li>
          </ul>
        </nav>
      </div>
   </div>
   <div class="top-card">
    <div class="grid__row">
      <div class="grid__col--12">
        <div class="card2">
          <p>This is what the navigation menu looks like when the screen is at 769px or higher. When the screen is less than 769px, the menu will be displayed vertically.</p>
          </div>
        </div>
       </div>

     <div class="main-col">
    <div class="grid__row">
      <div class="grid__col--8">
        <div class="card">
          <h4 id="type" class="headline--secondary">Typography</h4>
          <h1 class="headline--primary">Take a look at this amazing headline</h1>
          <p>This is a typical paragraph for the UI Kit. <a href="#" class="link">Here is what a link might look like</a>. The typical font family for this kit is Helvetica Neue.  This kit is intended for clean and refreshing web layouts. No jazz hands here, just the essentials to make dreams come true, with minimal clean web design. The kit comes fully equipped with everything from full responsive media styling to buttons to form fields. <em>I enjoy using italics as well from time to time</em>. Fell free to create the most amazing designs ever with this kit. I truly hope you enjoy not only the kit but this amazing paragraph as well. :)</p>
          <blockquote class="blockquote">You know what really gets me going? A really nice set of block quotes.  That's right, block quotes that say, "Hey, I'm an article you want to read and nurture."</blockquote>
        </div>
       </div>
       </div>
      <div class="grid__col--4">
        <form class="form">
          <legend id="forms" class="headline--secondary">Form Elements</legend>
          <img class="img--avatar" src="images/avatar.png" alt="Avatar">
          <label class="form__label--hidden" for="username">Username:</label>
          <input class="form__input" type="text" id="username" placeholder="Your code name">
          <label class="form__label--hidden" for="password">Password:</label>
          <input class="form__input" type="password" id="password" placeholder="Your super secret code">
          <button class="btn--default theme__colors" type="submit" value="Login">Login</button>
        </form>
       </div>
      </div>
     </div>
    </div>
    </div>
    <h4 id="images" class="headline--secondary">Images</h4>

    <div class="grid__row">
      <div class="grid__col--6">
        <img class="img--frame" src="images/image.png" alt="sample image">
      </div>
      <div class="grid__col--6">
        <img class="img--avatar" src="images/avatar.png" alt="Avatar">
      </div>
    </div>

    <h4 id="buttons" class="headline--secondary">Buttons</h4>

    <div class="grid__row--12">
      <div class="grid__col--12">
        <button class="btn--default theme__colors">login</button>
        <button class="btn--success theme__colors">success</button>
        <button class="btn--error theme__colors">error</button>
        <button class="btn--warning theme__colors">warning</button>
        <button class="btn--info theme__colors">info</button>
      </div>
    </div>

    <h4 id="grid" class="headline--secondary">Grid System</h4>

   <div class="flexbox">   
    <div class="grid__row1">
      <div class="grid__col--12 theme__colors twelve">.grid__col--12</div>
    </div>
    <div class="grid__row1">
      <div class="grid__col--6 theme__colors six">.grid__col--6</div>
      <div class="grid__col--6 theme__colors six">.grid__col--6</div>
    </div>
    <div class="grid__row1">
      <div class="grid__col--4 theme__colors four">.grid__col--4</div>
      <div class="grid__col--4 theme__colors four">.grid__col--4</div>
      <div class="grid__col--4 theme__colors four">.grid__col--4</div>
    </div>
    <div class="grid__row1">
      <div class="grid__col--3 theme__colors three">.grid__col--3</div>
      <div class="grid__col--3 theme__colors three">.grid__col--3</div>
      <div class="grid__col--3 theme__colors three">.grid__col--3</div>
      <div class="grid__col--3 theme__colors three">.grid__col--3</div>
    </div>
    <div class="grid__row1">
      <div class="grid__col--5 theme__colors five">.grid__col--5</div>
      <div class="grid__col--7 theme__colors seven">.grid__col--7</div>
    </div>
    <div class="grid__row1">
      <div class="grid__col--8 theme__colors eight">.grid__col--8</div>
      <div class="grid__col--4 theme__colors four">.grid__col--4</div>
    </div>
    <div class="grid__row1">
      <div class="grid__col--7 theme__colors centered2 seven">.centered .grid__col--7</div>
    </div>
   </div>
  </body>
</html>

And the CSS

.blockquote, #type, .headline--primary, #images {
  text-align: left; }

* {
  text-align: center;
  text-decoration: none;
  list-style: none;
  line-height: 1.4em; }

@media (min-width: 1400px) {
  body {
    max-width: 90%;
    margin: auto; } }

.card {
  max-width: 90%;
  margin: auto; }
  .card p {
    text-align: left; }
  @media (min-width: 1400px) {
    .card2 {
      margin-left: 1.5em; } }

.grid__col--12 p {
  margin-top: 3em;
  margin-bottom: 2em;
  color: #999999; }
  @media (min-width: 1400px) {
    .grid__col--12 p {
      max-width: 70%;
      margin-right: 0px; } }

.blockquote {
  font-weight: bold;
  border-left: 8px solid #83DEF1;
  padding-left: 10px;
  margin-left: 10px; }
  @media (min-width: 1400px) {
    .blockquote {
      max-width: 60%; } }

#type {
  color: #999999;
  font-weight: normal; }

.headline--primary {
  color: #B1D3BE;
  margin-left: .5em; }
  @media (min-width: 1400px) {
    .headline--primary {
      margin-left: 0px;
      margin-top: -10px; } }

.link {
  color: #83DEF1; }

.main-col {
  display: flex; }

.card {
  flex: 1; }

.grid__col--4 {
  flex: 1; }

.nav a {
  color: #999999; }

.nav {
  margin-top: 2.2em; }

.nav li {
  padding: .8em;
  margin-top: .2em;
  width: 40%;
  margin: auto;
  border-radius: 5px; }
  .nav li:hover {
    background-color: #B1D3BE; }
    .nav li:hover a {
      color: #fafafa; }

@media (min-width: 1400px) {
  .main-nav {
    display: flex;
    justify-content: space-between;
    width: 90%;
    margin: auto; } }

@media (min-width: 1400px) {
  .nav {
    display: flex; } }

#images {
  font-weight: normal;
  margin-left: 1em;
  color: #999999; }

.img--frame {
  max-width: 80%; }
.img--avatar {
  width: 40%;
  margin-top: 1em; }
@media (min-width: 1400px) {
  .img--logo {
    margin-top: 1em; } }

#forms {
  color: #999999;
  margin-top: 3em;
  margin-bottom: .7em; }

.form {
  max-width: 90%;
  margin: auto; }
  .form__label--hidden {
    display: none; }
  .form input {
    display: block;
    width: 100%;
    margin-bottom: 1.3em;
    margin-top: 1.3em;
    padding: .7em 0;
    border-radius: 5px;
    border: none;
    border-bottom: 6px solid #B1D3BE; }
  .form button {
    display: block;
    width: 100%;
    background-color: #83DEF1;
    color: #ffffff;
    border-radius: 5px;
    padding: 1em 0;
    border: none;
    font-size: 18px; }
  @media (min-width: 1400px) {
    .form {
      display: flex;
      flex-direction: column; } }

::-webkit-input-placeholder {
  color: #999999;
  text-align: left;
  font-size: 15px; }

#buttons {
  display: none; }
  @media (min-width: 1400px) {
    #buttons {
      display: block;
      max-width: 88%;
      margin: auto;
      color: #999999;
      font-weight: normal;
      font-size: 22px;
      text-align: left; } }

#grid {
  display: none; }

.grid__row--12 {
  display: flex;
  flex-direction: column;
  max-width: 90%;
  margin: 5em auto; }
  @media (min-width: 1400px) {
    .grid__row--12 {
      margin-top: 1em; } }
  .grid__row--12 button {
    width: 100%;
    padding: 1em 0;
    border-radius: 5px;
    margin-bottom: .5em;
    border: none;
    color: #ffffff;
    font-size: 18px; }

.theme__colors {
  background-color: pink;
  margin-top: .7em;
  border-radius: 5px; }

.flexbox {
  display: flex;
  flex-direction: column;
  max-width: 90%;
  margin: 0 auto;
  width: 100%; }
  .flexbox div {
    padding: 1em 0;
    font-size: 18px;
    color: #ffffff; }

.btn--default {
  background-color: #83DEF1; }
.btn--success {
  background-color: #B1D3BE; }
.btn--error {
  background-color: #F58980; }
.btn--warning {
  background-color: #F5AE80; }
.btn--info {
  background-color: #CC95DF; }

.twelve {
  background-color: #B1D3BE; }

.six {
  background-color: #5F75CE; }

.four {
  background-color: #ECB183; }

.three {
  background-color: #CC95DF; }

.five {
  background-color: #8DDF8B; }

.seven {
  background-color: #C27561; }

.eight {
  background-color: #B1D3BE; }

@media (min-width: 1400px) {
  .grid__row1 {
    display: flex;
    flex-direction: row; } }

@media (min-width: 1400px) {
  .grid__col--12, .grid__col--6, .grid__col--4, .grid__col--3, .grid__col--5 {
    flex: 1; } }

@media (min-width: 1400px) {
  .grid__col--7 {
    flex: 2; } }

@media (min-width: 1400px) {
  .grid__col--8 {
    flex: 3; } }

.theme__colors {
  margin: .6em; }

.centered2 {
  justify-content: space-around;
  margin: 0 10em; }

@media (min-width: 1400px) {
  .grid__col--12 {
    display: flex;
    flex-direction: row; } }

Thank-you in advance.

Adam McGrade
Adam McGrade
26,333 Points
Adam McGrade
Adam McGrade
26,333 Points

I think you are missing a rule for grid__row. Try this

.grid__row {
  display: flex;
  flex-wrap: wrap;
}

Also try placing the .grid__col--4 column containing the form inside the .grid__row that is inside .main-col, so you would have 

<div class="main-col">
  <div class="grid__row">
     <div class="grid__col--8"></div>
     <div class="grid__col--4"></div>
  </div>
</div>