Shop elements Horizontal

[mbond5]

Hi Guys,

I’m using WooCommerce on my site and developing my own theme for it.

I’m having some issues with making this list for the products horizontal, here is the page…

http://musicjolt.org/wp/shop/

This is the code…

.products li {
   list-style: none;
   display: inline;
   padding-left: 1%
   padding-right: 1%;
   width: 32% !important;
   padding-top: 10px;
   padding-bottom: 40px;
   margin: 0;
}

Can anyone let me know how I can revise it to make it work correctly.

Thanks,

Mike

[RyanReese]

Try making that inline-block instead.

Inline-block elements are inline but actually recognize/let you use stuff like widths.

[RyanReese]

Also you have a missing semi colon after padding-left:1%.

[mbond5]

Awesome!

Thanks so much man!

A couple other small issues on the page that I can’t seem to resolve.

1. How can I get the items aligned to the left with all the other content?

2. Underneath the h3 of each product listing it should show the price in the code it shows the price class but does not publish it.

3. If the price has a long name and the text shifts to another line the image section bumps up on that specific image so it does not align with the other products is there a way to resolve this do I need to give the li elements a specific height so it always aligns corrects?

[RyanReese]

1. <ul> by default comes with a left padding. We need to remove that, and remove the left padding on the first <li> item so it lines up (otherwise it’ll be slightly off due to the 1% left padding)

.products {
  padding:0;
}
.products li:first-child {
  padding-left:0;
}

I’d actually remove left padding altogether and just use right padding (one or the other) to make it easier; just me though.

2. Why did you position:absolute .price{}? If it’s supposed to be underneith the h3, then don’t do anything to .price{}. Remove the position:absolute/top/right
3. You can give vertical-align:top; to the .products li{} and that’ll align the image to the top. That’ll mean that the add to cart button may be slightly off if the longer name needs to wrap. Pick your poison .