Brian Francoeur Brian Francoeur - 3 months ago 9
CSS Question

Category items won't display on a single row

I am finishing up a custom Storefront child theme for a client. Yesterday, when I began work, I noticed the homepage category row items were displaying on two rows. I had made no changes to any of the template code or CSS. No matter what I do, I cannot get them to display on a single row. I have removed the float, put float:left back, removed the margins and padding, without any of the changes correcting the way that the category items display.

site 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;
}


Custom PHP (in child theme)

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: I disabled my child theme stylesheet, but the issue persists. I switched to the parent theme, and the category items display in a single row. I have only one stylesheet for the child theme.

UPDATE: Thoroughly checked the custom PHP function for syntax errors and found none.

UPDATE: I removed all custom functions and hooks from the child theme, but still have this problem. it seems like it might have to do with my template-homepage.php file, but I am not sure why. The only change I made to it was to substitute my hooks for the custom storefront template functions.

Answer

It's important to include the relevant HTML as well when asking a question like this. I'm including the HTML for the product category section you mentioned here:

<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>

There's several things going on here:

If you inspect the output, you'll find that for some reason, the second product is getting the class of first.

Part of the styles for first are clear: both !important;, which forces it below the first product, which is float: left.

I personally dislike floats in this situation, so I would recommend adjusting the styles for .product to float: none, and keeping the display: inline-block.

Note that the styles that appeared to work for me when fiddling with it are:

.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;
}

Others may tell you that using flexbox is the answer, and I wouldn't disagree - it's just not my "go to" method. (If you anticipate having more than 3 categories, and there's a risk that the category items may have different heights, then flexbox is the right way to go).

As a side-note, this style that you have at line 26 in your stylesheet:

* {
    box-sizing: border-box;
}

Is a very "dangerous" rule. I had a problem arise on a site that took hours to sort out which was caused by this exact rule.

I would caution you strongly against * rules. The only one I ever use * for is to reset margin and padding to 0.

Lastly - note that your markup is incorrect within your product li elements. The a tag opens, then a div tag opens, then the a tag closes before the div tag close. Assuming you are using HTML5 -the markup could be cleaned up and simplified like so:

    <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>

(if you are not using HTML5 then it is not legal / correct to wrap an a tag around a div tag)

Comments