Viewing 9 replies - 1 through 9 (of 9 total)
  • Plugin Author Mike Jolley (a11n)

    (@mikejolley)

    Need a link..

    Thread Starter unaffiliatedwithcanada

    (@unaffiliatedwithcanada)

    EDIT : hyperlinked

    Thread Starter unaffiliatedwithcanada

    (@unaffiliatedwithcanada)

    sorry for the late reply

    Try adding this CSS code to the bottom of styles.css

    .woocommerce ul.products li.product {
        width: 21.75%;
    }
    mark, .mark {
        background-color: transparent;
    }
    Thread Starter unaffiliatedwithcanada

    (@unaffiliatedwithcanada)

    Hey thanks for your response,

    I still have the products going only 2 wide 🙁

    my website

    EDIT: I see default.css is overriding changes on styles.css.

    Try using this instead:

    .woocommerce ul.products li.product {
        width: 21.75% !important;
    }
    mark, .mark {
        background-color: transparent !important;
    }
    Thread Starter unaffiliatedwithcanada

    (@unaffiliatedwithcanada)

    woo-hoo! your a champ, how do I customize how many are placed in each row ? (theres still lots of blank space to the right ) 😛

    Thread Starter unaffiliatedwithcanada

    (@unaffiliatedwithcanada)

    also It now looks crazy when I check it out on my phone :/

    You can customize how many are in each row by changing the width. So if the width were smaller such as 17% it should fit 5 or if the width was 29% it should fit 3.

    This should get the products more centered on the page.

    .col-md-7 {
        width: 95% !important;
    }

    If products aren’t all showing up in one row it means that your product picture aspect ratios are different so you’d need to fix it by hard cropping pics and maybe regenerating thumbnails.

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘How to make products go full screen’ is closed to new replies.