CSS

Bartłomiej Wilczyński
Bartłomiej Wilczyński
5,774 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
177,522 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.

Bartłomiej Wilczyński
Bartłomiej Wilczyński
5,774 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?