CODEWITHSUNDEEP
csswordpresswoocommercesmartphone
DrMTR
DrMTR

Reputation: 509

How to show 2 products per column on mobile view in Woocommerce?

i have issue with showing 2 products per column in smartphone view. I tryed this CSS, to customize the look, but it show now all products into one row. URL to shop.

@media (max-width: 480px)  {

#dhvc_woo_fc7928715c .dhvc-woo-masonry-list .dhvc-woo-masonry-item {
 float: left;
  width: 50%;
 }
}

im using Visual Composer and DHVC Woocommerce Products Layouts to get that look. Currently is showing like this:

enter image description here

and want to make like this:

enter image description here

what is wrong in my CSS?

Upvotes: 0

Views: 4570

Answers (1)

Xhynk
Xhynk

Reputation: 13890

Just an FYI, your first "single column" media query is 767px wide, not 480px.

That said, there should be an option somewhere in your DHVC Woocommerce Products Layouts, either in a settings page or in the JavaScript itself that controls the layout options like that.

Edit: According to the plugin page, you may have better luck with the Grid layout option instead of Masonry: https://codecanyon.net/item/woocommerce-products-layouts/7384574#item-description__features

Currently, the reason your CSS isn't taking effect is because you have DHVC set to using a Masonry layout, which sets each element to position: absolute and adjusts the top and left values accordingly, so display: inline-block, float: left; and similar faux-column tricks won't work.

If you can't find the option in the DHVC settings or the JavaScript, you'll need to take it to the plugin developer for further assistance.

Edit: Like I said, I can almost guarantee the option you're looking for is in the DHVC options. Using the Masonry option makes "making it like you want via CSS" much more of a hack and imho, ugly.

If you're adamant about using just CSS (despite there assuredly being options to change the behavior in the /wp-admin/ settings page, and the developer providing premium support) - you'll need to remove the height Masonry sets on the parent container, and override inline styles on the items. Something like this will get you started 🙄... Again please consider using the built in options or ask the plugin developer before using this, it will probably cause you or the next person in charge of the site quite a headache later down the line.

@media (max-width: 767px){
    /* Masonry sets an absolute defined px based height, overwrite that */
    .dhvc-woo-row-fluid.dhvc-woo-masonry-list {
        height: auto !important;
    }

    /* Masonry sets absolute, top, and left, overwrite those
       as well as setting them to have a small gutter */
    .dhvc-woo-item.dhvc-woo-masonry-item {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: 50%;
        width: calc( 50% - 10px );
        float: left;
    }

    /* Scooch every second item over 10px */
    .dhvc-woo-item.dhvc-woo-masonry-item:nth-child(2n) {
        margin-left: 10px;
    }
}

Upvotes: 1

Related Questions