CODEWITHSUNDEEP
htmlcssflexbox
Purin
Purin

Reputation: 56

CSS justify-content: space-between not being recognized

I am very new to html and css. I do know that in my text editor (brackets) the text changes color for keywords, but the "space-between" is not being recognized despite it being one of the choices. The other ones work. (like "center")

Basically what i'm trying to do is spread out my 3 images horizontally across the page when the page is at least 768px. Here is a portion of my index:

<main class="main-area">
    <section class="box">
        <article class="boxes">
            <a href="#">
            <figure class="featured-image">
                <img src="images/single-blue.jpg">

                <div class="box-text">
                    <h2 class="box-title">Blue Firework</h2>


                    <p class="box-blurb">Image subtext</p>
                </div>
            </figure></a>
        </article>


        <article class="boxes">
            <a href="#">
            <figure class="featured-image">
                <img src="images/single-purple.jpg">

                <div class="box-text">
                    <h2 class="box-title">Purple Firework</h2>


                    <p class="box-blurb">Image subtext</p>
                </div>
            </figure></a>
        </article>


        <article class="boxes">
            <a href="#">
            <figure class="featured-image">
                <img src="images/single-orange.jpg">

                <div class="box-text">
                    <h2 class="box-title">Orange Firework</h2>


                    <p class="box-blurb">Image subtext</p>
                </div>
            </figure></a>
        </article>
    </section>
</main>
<!-- Close the main section -->

I think normally people combine their stylesheets but my teacher wants me to do them separate. Here is a css file:

    /*
primary style sheet
*/
@import url('CSS/accessibility.css');
@import url('CSS/reset.css');
@import url('CSS/typography.css');
@import url('CSS/navigation.css');
@import url('CSS/masthead.css');
@import url('CSS/banner.css');
@import url('CSS/boxes.css');
@import url('CSS/levels.css');

here is another css file:

    /******** Boxes Stylesheet ********/
.box{
    margin: 0 0 1em;
    border-bottom: 1px solid #000;
}

.box img {
    border: 2px solid #000;
}

.box-title {
    font-family: 'Nunito', sans-serif;
    font-weight: 300;
    color: black;
    padding: 0;
}
.box p {
    font-family: 'Nunito', sans-serif;
    color: black;
    font-size: 1.2em;
}

.box a {
    color: #000;
    text-decoration: none;
    display: block;
    padding: .25em;
}

@media screen and (min-width: 768px){
    .boxes {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    .box {
        width: calc(33.333333% - .5em);
    }
}

The text is white (not recognized) after justify-content: and also after Flex-wrap:

Thank you for your time. (first post so tell me if I posted wrong)

Upvotes: 1

Views: 1169

Answers (1)

Ricky Ruiz
Ricky Ruiz

Reputation: 26731

Your selectors are inverted in the CSS media query.

Change:

@media screen and (min-width: 768px){
    .boxes {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    .box {
        width: calc(33.333333% - .5em);
    }
}

For:

@media screen and (min-width: 768px){
    .box {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    .boxes {
        width: calc(33.333333% - .5em);
    }
}

Code Snippet:

/******** Boxes Stylesheet ********/

.box {
  margin: 0 0 1em;
  border-bottom: 1px solid #000;
}
.box img {
  border: 2px solid #000;
}
.box-title {
  font-family: 'Nunito', sans-serif;
  font-weight: 300;
  color: black;
  padding: 0;
}
.box p {
  font-family: 'Nunito', sans-serif;
  color: black;
  font-size: 1.2em;
}
.box a {
  color: #000;
  text-decoration: none;
  display: block;
  padding: .25em;
}
@media screen and (min-width: 768px) {
  .box {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .boxes {
    width: calc(33.333333% - .5em);
  }
}
<main class="main-area">
  <section class="box">
    <article class="boxes">
      <a href="#">
        <figure class="featured-image">
          <img src="http://placehold.it/100x100">
          <div class="box-text">
            <h2 class="box-title">
                                Blue Firework
                            </h2>
            <p class="box-blurb">
              Image subtext
            </p>
          </div>
        </figure>
      </a>
    </article>

    <article class="boxes">
      <a href="#">
        <figure class="featured-image">
          <img src="http://placehold.it/100x100">
          <div class="box-text">
            <h2 class="box-title">
                                Purple Firework
                            </h2>
            <p class="box-blurb">
              Image subtext
            </p>
          </div>
        </figure>
      </a>
    </article>

    <article class="boxes">
      <a href="#">
        <figure class="featured-image">
          <img src="http://placehold.it/100x100">
          <div class="box-text">
            <h2 class="box-title">
                                Orange Firework
                            </h2>
            <p class="box-blurb">
              Image subtext
            </p>
          </div>
        </figure>
      </a>
    </article>
  </section>

</main>
<!-- Close the main section -->

Not every editor is updated with the latest keywords, don't worry space-between is a valid CSS value for justify-content property. You can check out the accepted values for justify-content here and here.

Upvotes: 6

Related Questions