flexbox styles no longer applied to HTML markup applied inside PHP block.

Question

I've run into something curious. I am working on a page similar to one we created in the build a basic website with PHP course. I am using flexbox to layout the content, which is a catalog of book covers. When my file was only HTML and CSS, flexbox worked perfectly. When I converted the file to PHP and used a data.php file and a foreach loop within the index.php file, flexbox is no longer working to layout the content. Can anyone pinpoint why?

Here is the php:

  <div class="content">
   <div class="suggestions">
    <div class="wrapper">
      <h2>May I Make a Suggestion?</h2>
      <ul class="items">
        <div class="list-section">
          <?php
            foreach ($catalog as $item) {
              echo "<li><a href='#'><img src='"
                      . $item["img"] . "' alt ='"
                      . $item["title"] . "' /></a></li>"
                      . "<p>" . $item["title"] . "</p>"
                      . "<p>" . $item["authors"] . "</p>";
            }
          ?>
        </div>
      </ul>
    </div>
   </div>
 </div>


</body>

</html>

And here is the css:

.content .items {
  padding: 0;
  list-style-type: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.content .list-section {
  padding: 0 10px;
}

.content li img {
  width: 90%;
}

Answer 1 · 2016-05-19T01:49:47Z

May 19, 2016 1:49am

I duplicated this using my own images, and it seems to be working fine.

What specifically is it not doing? May I see the rest of the page ( the stuff above the opening div)?

These things might help me figure out what your issue is.

Welcome to the Treehouse Community

Looking to learn something new?

Zachary Vacek

Zachary Vacek

flexbox styles no longer applied to HTML markup applied inside PHP block.

1 Answer

Duane Simer

Duane Simer

Zachary Vacek

Zachary Vacek