Code works and looks fine in W3School but does not work or look right in WP,

  • Unknown's avatar
    kyvettehughes · Member · 
    <!DOCTYPE html>
<html>
<head>
<style>
div.gallery {
  border: 1px solid #ccc;
}

div.gallery:hover {
  border: 1px solid #777;
}

div.gallery img {
  width: 100%;
  height: auto;
}

div.desc {
  padding: 15px;
  text-align: center;
}

* {
  box-sizing: border-box;
}

.responsive {
  padding: 0 6px;
  float: left;
  width: 24.99999%;
}

@media only screen and (max-width: 700px) {
  .responsive {
    width: 49.99999%;
    margin: 6px 0;
  }
}

@media only screen and (max-width: 500px) {
  .responsive {
    width: 100%;
  }
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

.filter {
  margin: 20px 0;
}
</style>
</head>
<body>

<h2>Warehouse Carpets Hardwood Catalog</h2>

<div class="filter">
  <label for="construction">Filter by Construction:</label>
  <select id="construction" onchange="filterGallery()">
    <option value="">All</option>
    <option value="Solid Hardwood">Solid Hardwood</option>
    <option value="Engineered Hardwood">Engineered Hardwood</option>
  </select>

  <label for="manufacturer">Filter by Manufacturer:</label>
  <select id="manufacturer" onchange="filterGallery()">
    <option value="">All</option>
    <option value="Shaw">Shaw</option>
    <option value="LW Flooring">LW Flooring</option>
  </select>
</div>

<div class="responsive gallery-item" data-construction="Solid Hardwood" data-manufacturer="Shaw">
  <div class="gallery">
    <a target="_blank" href="img_5terre.jpg">
      <img src="https://warehousecarpets.net/wp-content/uploads/2025/01/lw-flooring-vintage-elegance-aspendale-rs.jpg" alt="Vintage Elegance" width="600" height="400">
    </a>
    <div class="desc"><strong>Vintage Elegance</strong></div>
    <ul style="list-style-type:none;">
      <li>Color: Aspendale</li>
      <li>Construction: Solid Hardwood</li>
      <li>Manufacturer: Shaw</li>
    </ul>
  </div>
</div>

<div class="responsive gallery-item" data-construction="Engineered Hardwood" data-manufacturer="LW Flooring">
  <div class="gallery">
    <a target="_blank" href="img_forest.jpg">
      <img src="https://warehousecarpets.net/wp-content/uploads/2025/01/lw-flooring-pristine-cambria.jpg" alt="Pristine" width="600" height="400"> 
    </a>
    <div class="desc"><strong>Pristine</strong></div>
    <ul style="list-style-type:none;">
      <li>Color: Cambria</li>
      <li>Construction: Engineered Hardwood</li>
      <li>Manufacturer: LW Flooring</li>
    </ul>
  </div>
</div>

<div class="responsive gallery-item" data-construction="Engineered Hardwood" data-manufacturer="LW Flooring">
  <div class="gallery">
    <a target="_blank" href="img_lights.jpg">
      <img src="https://warehousecarpets.net/wp-content/uploads/2025/01/lw-flooring-paradise-island-tahiti.jpg" alt="Paradise Island" width="600" height="400">
    </a>
    <div class="desc"><strong>Paradise Island</strong></div>
    <ul style="list-style-type:none;">
      <li>Color: Tahiti</li>
      <li>Construction: Engineered Hardwood</li>
      <li>Manufacturer: LW Flooring</li>
    </ul>
  </div>
</div>

<div class="responsive gallery-item" data-construction="Solid Hardwood" data-manufacturer="Shaw">
  <div class="gallery">
    <a target="_blank" href="img_mountains.jpg">
      <img src="https://warehousecarpets.net/wp-content/uploads/2025/01/lw-flooring-vintage-elegance-aspendale-rs.jpg" alt="Vintage Elegance" width="600" height="400">
    </a>
    <div class="desc"><strong>Vintage Elegance</strong></div>
    <ul style="list-style-type:none;">
      <li>Color: Aspendale</li>
      <li>Construction: Solid Hardwood</li>
      <li>Manufacturer: Shaw</li>
    </ul>
  </div>
</div>

<div class="clearfix"></div>

<script>
function filterGallery() {
  const constructionFilter = document.getElementById('construction').value;
  const manufacturerFilter = document.getElementById('manufacturer').value;
  const items = document.querySelectorAll('.gallery-item');

  items.forEach(item => {
    const construction = item.getAttribute('data-construction');
    const manufacturer = item.getAttribute('data-manufacturer');

    if ((constructionFilter === '' || construction === constructionFilter) &&
        (manufacturerFilter === '' || manufacturer === manufacturerFilter)) {
      item.style.display = 'block';
    } else {
      item.style.display = 'none';
    }
  });
}
</script>

</body>
</html>

    This is the code I used in W3Schools and it worked and looked right but when I paste it in WordPress the filters do not work and there is only one image card per line. I disabled all my plugin and tried it but it did not change anything. What else should I check to see if it is causing this?

  • Unknown's avatar
    kyvettehughes · Member ·

    Here is the page link https://warehousecarpets.net/hardwood-2/hardwood-catalog/

  • The topic ‘Code works and looks fine in W3School but does not work or look right in WP,’ is closed to new replies.