Support » Fixing WordPress » Where is this margin coming from??

Viewing 8 replies - 1 through 8 (of 8 total)
  • You’ve got this CSS in your header:

    .woocommerce ul.products li.product a img{ width:300px }

    But I can’t tell if it’s coming from a plugin or a built-in theme option.

    Thread Starter ozosil

    (@ozosil)

    Yes, i did a costume CSS through the theme as the images were coming up at 100%, which was too big, so i had to change it to 300px. This created the margin I am now having problems with.

    Any ideas .

    Thanks

    Right now, you’ve got the products displaying two per row, which means that each product takes up 50% of the available space. Since each product is larger than 300 pixels wide, you’re always going to have that margin. There are a couple of different ways to fix it, but it depends on how you want it to look.

    Hi ozosil,

    The reason is that Woocommerce is using the following CSS:

    .woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
        width: 48%;
        float: left;
        clear: both;
        margin: 0 0 2.992em;
    }

    You are displaying two products per row. It occupies 48% of available space for a single product. Product image within li only 300 pixel wide. That’s why you are getting that margin.

    As @stephencottontail told, there are couple of different ways to fix it and it totally depends upon your requirement.

    Thread Starter ozosil

    (@ozosil)

    Thanks Guys

    Altho its still not working right, what I want it to do is diplay 4 products per row. I changed the width to 25% now it looks like this:

    http://www.adjoaa.com/shop/

    Thread Starter ozosil

    (@ozosil)

    How do i change how many products to display in 1 row, I am trying to make it display 4, seems to only want to display 2.

    Awad

    (@awadaljishi)

    Hi,

    Take a look at woocommerce shortcodes page:
    https://docs.woothemes.com/document/woocommerce-shortcodes/

    For example, you can use below code to display 4 recent products per row.
    [recent_products per_page="4" columns="4"]
    -> Copy and paste codes in the post/page.

    Thread Starter ozosil

    (@ozosil)

    Thanks, but for some reason even using that shortcode, it only places 2 products per row, What could be causing this?

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Where is this margin coming from??’ is closed to new replies.