Kategorieartikel werden nicht in einer einzigen Zeile angezeigt

Question

Ich beende ein benutzerdefiniertes Storefront-Unterthema für einen Client. Gestern, als ich mit der Arbeit anfing, bemerkte ich, dass die Startreihenfolge in zwei Zeilen angezeigt wurde. Ich hatte keine Änderungen an Template-Code oder CSS vorgenommen. Egal, was ich mache, ich kann sie nicht in einer einzigen Reihe anzeigen lassen. Ich habe das Float entfernt, Float: Links nach hinten, entfernt die Ränder und Padding, ohne dass die Änderungen die Art und Weise, dass die Kategorie Elemente anzuzeigen, korrigiert.

Website url: https://test.onyour6designs.com

CSS

.page-template-template-homepage-php .site-main .columns-3 ul.products, 
.storefront-full-width-content .site-main .columns-3 ul.products { 
    width: 100%; 
    display: block; 
} 

.page-template-template-homepage-php .site-main .columns-3 ul.products li.product, 
.storefront-full-width-content .site-main .columns-3 ul.products li.product { 
    display: inline-block; 
    float: left; 
    width: 29%; 
    margin-right: 0; 
} 
.page-template-template-homepage-php .site-main .columns-3 ul.products li.product:last-child, 
.storefront-full-width-content .site-main .columns-3 ul.products li.product:last-child { 
     margin-right: 0; 
} 

Other CSS: 
storefront style.css 
ol, ul { 
    margin: 0 0 1.618em 3em; 
    padding: 0; 
} 
* { 
    box-sizing: border-box; 
} 

woocommerce.css 
ul.products { 
    margin-left: 0; 
    clear: both; 
} 
ul.products:after, ul.products:before { 
    content: ""; 
    display: table; 
} 
ul.products:after { 
    clear: both; 
} 
ul.products:after, ul.products:before { 
    content: ""; 
    display: table; 
} 

Benutzerdefinierte PHP (in der Kinder Thema)

Storefront-template-functions.php

if (! function_exists('storefront_oy6d_product_categories')) { 
/** 
* Display Product Categories 
* Hooked into the `homepage` action in the homepage template 
* 
* @since 1.0.0 
* @param array $args the product section args. 
* @return void 
*/ 
function storefront_oy6d_product_categories($args) { 

    if (is_woocommerce_activated()) { 

     $args = apply_filters('storefront_oy6d_product_categories_args', array(
      'limit'    => 3, 
      'columns'   => 3, 
      'child_categories' => 0, 
      'orderby'   => 'name', 
      'title'    => __('Shop by Category', 'storefront'), 
     )); 

     echo '<section class="storefront-oy6d-product-categories phone">'; 

     do_action('storefront_homepage_before_product_categories'); 

     echo '<h2 class="section-title">' . wp_kses_post($args['title']) . '</h2>'; 

     do_action('storefront_homepage_after_product_categories_title'); 

     echo storefront_do_shortcode('product_categories', array(
      'number' => intval($args['limit']), 
      'columns' => intval($args['columns']), 
      'orderby' => esc_attr($args['orderby']), 
      'parent' => esc_attr($args['child_categories']), 
     )); 

     do_action('storefront_homepage_after_product_categories'); 

     echo '</section>'; 
    } 
    } 
} 

Rendered HTML

<ul class="products"> 
    <li class="product-category product"> 
     <a href="https://test.onyour6designs.com/product-category/gun-holsters/"> 
      <div class="pso-wrap"> 
       <img src="//test.onyour6designs.com/wp-content/uploads/2016/09/custom-gun-holsters-420x350.jpg" alt="Holsters" width="420" height="535" /></a>  
       <div class="pso-title"> 
        <a href="https://test.onyour6designs.com/product-category/gun-holsters/"><h3>Holsters <mark class="count">(21)</mark>  </h3> </a>  
       </div> 
      </div> 
    </li> 
    <li class="product-category product first"> 
     <a href="https://test.onyour6designs.com/product-category/magazine-holsters/"> 
      <div class="pso-wrap"> 
       <img src="//test.onyour6designs.com/wp-content/uploads/2014/09/OnYour6Designs_Ruger_SR22_Holster-5-420x535.jpg" alt="Mag Holsters" width="420" height="535" /> 
     </a>   
     <div class="pso-title"> 
      <a href="https://test.onyour6designs.com/product-category/magazine-holsters/"> 
       <h3>Mag Holsters <mark class="count">(13)</mark>  </h3> 
      </a>   
     </div> 
     </div> 
    </li> 
    <li class="product-category product last"> 
     <a href="https://test.onyour6designs.com/product-category/on-your-6-gear/"> 
      <div class="pso-wrap"> 
       <img src="//test.onyour6designs.com/wp-content/uploads/2015/06/Gear-420x535.png" alt="On Your 6 Gear" width="420" height="535" /> 
     </a>   
     <div class="pso-title"> 
      <a href="https://test.onyour6designs.com/product-category/on-your-6-gear/"> 
       <h3>On Your 6 Gear <mark class="count">(2)</mark>  </h3> 

      </a>   
     </div> 
     </div> 
    </li> 
</ul> 

UPDATE: ich mein Kind Thema Sheet deaktiviert, aber das Problem weiterhin besteht. Ich wechselte zum übergeordneten Thema, und die Kategorieelemente werden in einer einzelnen Zeile angezeigt. Ich habe nur ein Stylesheet für das untergeordnete Thema.

UPDATE: gründlich überprüft die benutzerdefinierte PHP-Funktion für Syntaxfehler und keine gefunden.

UPDATE: Ich habe alle benutzerdefinierten Funktionen und Hooks aus dem untergeordneten Thema entfernt, aber immer noch dieses Problem. Es scheint, als ob es mit meiner Vorlage-homepage.php-Datei zu tun haben könnte, aber ich bin mir nicht sicher warum. Die einzige Änderung, die ich daran vorgenommen habe, war, meine Hooks für die benutzerdefinierten Storefront-Vorlagenfunktionen zu ersetzen.

Answer 1

Wenn Sie eine Frage wie diese stellen, ist es wichtig, dass Sie auch das entsprechende HTML einfügen. Ich bin auch der HTML-Code für den Bereich Produktkategorie Sie hier erwähnt:

<ul class="products"> 
    <li class="product-category product"> 
     <a href="https://test.onyour6designs.com/product-category/gun-holsters/"> 
      <div class="pso-wrap"> 
       <img src="//test.onyour6designs.com/wp-content/uploads/2016/09/custom-gun-holsters-420x350.jpg" alt="Holsters" width="420" height="535" /></a>  
       <div class="pso-title"> 
        <a href="https://test.onyour6designs.com/product-category/gun-holsters/"><h3>Holsters <mark class="count">(21)</mark>  </h3> </a>  
       </div> 
      </div> 
    </li> 
    <li class="product-category product first"> 
     <a href="https://test.onyour6designs.com/product-category/magazine-holsters/"> 
      <div class="pso-wrap"> 
       <img src="//test.onyour6designs.com/wp-content/uploads/2014/09/OnYour6Designs_Ruger_SR22_Holster-5-420x535.jpg" alt="Mag Holsters" width="420" height="535" /> 
     </a>   
     <div class="pso-title"> 
      <a href="https://test.onyour6designs.com/product-category/magazine-holsters/"> 
       <h3>Mag Holsters <mark class="count">(13)</mark>  </h3> 
      </a>   
     </div> 
     </div> 
    </li> 
    <li class="product-category product last"> 
     <a href="https://test.onyour6designs.com/product-category/on-your-6-gear/"> 
      <div class="pso-wrap"> 
       <img src="//test.onyour6designs.com/wp-content/uploads/2015/06/Gear-420x535.png" alt="On Your 6 Gear" width="420" height="535" /> 
     </a>   
     <div class="pso-title"> 
      <a href="https://test.onyour6designs.com/product-category/on-your-6-gear/"> 
       <h3>On Your 6 Gear <mark class="count">(2)</mark>  </h3> 

      </a>   
     </div> 
     </div> 
    </li> 
</ul> 

Es gibt mehrere Dinge, die sich hier:

Wenn Sie die Ausgabe überprüfen, Sie, dass aus irgendeinem Grund finden, Das zweite Produkt erhält die Klasse first.

Teil der Stile für first ist clear: both !important;, die es unter dem ersten Produkt zwingt, die float: left ist.

Ich persönlich mag Schwimmer in dieser Situation nicht, also würde ich empfehlen, die Stile für .product zu float: none zu ändern und die display: inline-block zu behalten.

Beachten Sie, dass die Stile, die für mich schien zu arbeiten, wenn mit ihm das Hantieren sind:

.page-template-template-homepage-php .site-main .columns-3 ul.products li.product, 
.storefront-full-width-content .site-main .columns-3 ul.products li.product { 
    display: inline-block; 
    float: none; 
    width: 29%; 
    margin-right: 0; 
    vertical-align: top; 
} 

Andere sagen, dass Flexbox mit der Antwort, und ich würde nicht zustimmen nicht - es ist einfach nicht mein " gehe zu "Methode.(Wenn Sie erwarten, mehr als 3 Kategorien zu haben, und es besteht das Risiko, dass die Kategorieelemente unterschiedliche Höhen haben, dann ist die Flexbox der richtige Weg).

Als Randnotiz, diese Art, die Sie in Zeile 26 in Ihrem Stylesheet haben:

* { 
    box-sizing: border-box; 
} 

Ist eine sehr „gefährlich“ Regel. Ich hatte ein Problem auf einer Website, die Stunden dauerte, um herauszufinden, was durch diese genaue Regel verursacht wurde.

Ich würde Ihnen dringend, vor * Regeln warnen. Die einzige, die ich je * verwenden für zu 0.

Schließlich margin und padding zurückgesetzt werden - beachten Sie, dass Ihr Markup in Ihrem Produkt li Elemente falsch ist. Das a-Tag wird geöffnet, dann wird ein div-Tag geöffnet, und das a-Tag schließt , bevor das div-Tag schließt. Angenommen, Sie sind mit HTML5 -der Markup gereinigt werden könnte und wie so vereinfacht:

<li class="product-category product last"> 
     <a href="https://test.onyour6designs.com/product-category/on-your-6-gear/"> 
      <div class="pso-wrap"> 
       <img src="//test.onyour6designs.com/wp-content/uploads/2015/06/Gear-420x535.png" alt="On Your 6 Gear" width="420" height="535" /> 
       <div class="pso-title"> 
        <h3>On Your 6 Gear <mark class="count">(2)</mark></h3> 
       </div> 
      </div> 
     </a>   
    </li> 

(wenn Sie nicht HTML5 verwenden, dann ist es nicht legal/korrekt ein a Tag um ein div zu wickeln Tag)