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 Unsubscribed User
Unsubscribed User
6,269 Points

Why flex-grow is not working here?

Hi, I want the .aside-text and .aside-img to be equal width after 950px break-point. I set their flex-grow to 1 and flex-basis to 0 but it's not working, can someone help me? Here is the code: HTML:

      <div class="aside-container">
        <div class="aside-content">
          <div class="aside-text">
            <h1>Oglądaj na telewizorze.</h1>
            <p>Oglądaj na telewizorach Smart TV, konsolach PlayStation i Xbox, odtwarzaczach Chromecast, Apple TV oraz Blu-ray i nie tylko.</p>
            <a href="#">Zacznij teraz</a>
          </div> <!-- /aside-text -->
          <div class="aside-img">
            <img src="img/div1.png" alt="">
          </div> <!-- /aside-container -->
        </div> <!-- /aside-content -->
      </div> <!-- /aside-container -->

Here is the CSS: 

.aside-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.aside-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.aside-text img {
  max-width: 100%;
}

.aside-text a {
  display: none;
  text-decoration: none;
}

@media (min-width: 950px) {
  .aside-content {
    flex-direction: row;
    max-width: 1100px;
  }
  .aside-text {
    flex-grow: 1;
    flex-basis: 0;
    text-align: left;
  }
  .aside-img {
    flex-grow: 1;
    flex-basis: 0;
  }
  .aside-text a {
    display: inline-block;
  }

1 Answer

Steven Parker
Steven Parker
231,269 Points
Steven Parker
Steven Parker
231,269 Points

The media query is missing the final closing brace (}). But after fixing that, both columns do take up the same space when I try it.

Also, you can replace both settings with the shorthand "flex: 1;" if you want.

Unsubscribed User
Unsubscribed User
6,269 Points

In my original file the final closing brace is where it should be, I just forgot to put it in here. So what's the problem? Is it connected with code I didn't show here?

Steven Parker
Steven Parker
231,269 Points
Steven Parker
Steven Parker
231,269 Points

Perhaps, all I can say is this worked for me after fixing the brace.