0

At my wits end. Have looked at other answered questions on here, and can't seem to get the answers to work.

My fiddle: (Exp:resso store code left in just to show that that's what I'm using.)

https://jsfiddle.net/4gk5qszm/

HTML:

<div class="StoreContent-Index">
{exp:store:search orderby="date" sort="desc"}
{exp:store:product entry_id="{entry_id}"}

<ul class="StoreContent-ProductIndexList">
<li>
<a href="{url_title_path='store/product'}">
<img src="{product_image}" class="TCBProductImgCat">
<h4>{title}</h4>
<p>{regular_price}</p>
</a>
</li>
</ul>

{/exp:store:product}
{/exp:store:search}
</div>

CSS:

ul.StoreContent-ProductIndexList{
  display: inline-block;
  *display: inline;
  zoom: 1;
  float: left;
}

ul.StoreContent-ProductIndexList li {
width: 200px;
display: inline-block;
vertical-align: top;
*display: inline;
*zoom: 1;
}

.StoreContent-Index{
background: #FFF;
width: 100%;
}

.StoreContent-ProductIndexList:after { 
clear: both;
}

How it looks live:

http://www.thymecher.com/0316-S

I've tried grid alignment, floating, all the inline stuff - nada. I just want the danged things to align properly side by side in the list style shown in the fiddle. (Image, title underneath, price underneath that - repeated horizontally, not vertically, with - say - 8 products per line.)

Any help is greatly appreciated. Thanks!

C.A
  • 3
  • 1
  • Your live site seems rather different from the code you posted. The `ul`s are wrapped in `form`s. For it to work you could add `display: inline-block; vertical-align: top` to `.store_product_form`. As for your fiddle, I didn't observe anything _not_ being inline (see https://jsfiddle.net/4gk5qszm/1/). Could you post your rendered HTML (instead of the Expression template)? – Andrew Myers Mar 25 '16 at 18:44
  • As @AndrewMyers points out, the code on your site doesn't actually match what you've posted and the markup on your site is pretty wacky, semantically. Since this is a WP-based store, I'm assuming you don't control a lot of this markup, like the div full of hidden inputs in each form element or the `.StoreContent-ProductIndexList` lists. I'm working on a fix now, but if you have the capacity to change some of this markup, things will be a lot cleaner/easier. – Angelique Mar 25 '16 at 19:31
  • Thanks for taking a look! I posted is EXACTLY what I coded in my templates; however, what you're speaking of is apparently being rendered from the Exp:resso Store mod, which I don't have the first clue as to where to look to edit that. Where I'm displaying categories rather than the products IN the categories, I have a grid layout going & it works great, but applying it to the prods hasn't worked - thus, my stop here for help. :) This is an EXPRESSION ENGINE based store, not WP. :) You're right, I definitely don't control the markup... – C.A Mar 26 '16 at 19:53
  • And I should add that my attempts to contact the author of the plugin have been futile. :( I appreciate anything you have to offer! – C.A Mar 26 '16 at 19:53

2 Answers2

1

So, as Andrew pointed out, your example code doesn't really match what's happening on your site. Within the .StoreContent-Index div, every one of your products is wrapped in a form element and, within that is a div and a ul, the latter of which has the actual product info in it.

The combination of form elements being block-level elements and the fact that many basic HTML elements have a default clearfix (What is clearfix?) applied to them in your stylsheet was really working against you here. I have a working, minimal example on CodePen that you can review, but assuming you can make changes to all of your stylesheets, the main changes you'll want to make will be in http://www.thymecher.com/?css=0316-Styles/store-main.v.1458927906

In that stylesheet, you can remove the following code:

ul.StoreContent-ProductIndexList{
  display: inline-block;
  *display: inline;
  zoom: 1;
  float: left;
}

ul.StoreContent-ProductIndexList li {
width: 200px;
display: inline-block;
vertical-align: top;
*display: inline;
*zoom: 1;
}

and replace it with this:

ul.StoreContent-ProductIndexList, ul.StoreContent-ProductIndexList > li {
  list-style:none;
}
.store_product_form {
  display:inline-block;
  vertical-align:top;
  width: 200px;
}

This should give you the layout you're looking for.

Community
  • 1
  • 1
Angelique
  • 906
  • 7
  • 15
  • Angelique, thank you! I'll go attempt that right now & report back. Cross your fingers! :) – C.A Mar 26 '16 at 19:54
  • Angelique, you are amazing, and I can't thank you enough. This is EXACTLY what I was going for. THANK YOU!! (And everyone else that replied as well! :) ) – C.A Mar 26 '16 at 19:58
0

Fiddle not rendering correctly.

I don't think your CSS naming conventions are valid

ul.StoreContent-ProductIndexList li

You should just use the StoreContent-ProductIndexList class; or

.StoreContent-ProductIndexList li

I would research FlexBox. It really helps with alignment (someone's CodePen example: http://codepen.io/HugoGiraudel/pen/LklCv).
.StoreContent-ProductIndexList { display: flex; justify-content: space-around; }

You may want to give your "li" lines a class name too

.liClasses {
  margin: as needed;
  others: as needed;
}
Phil Lucks
  • 2,704
  • 6
  • 31
  • 57
  • The selector `ul.StoreContent-ProductIndexList li` is a perfectly valid CSS selector. You can verify that it works either with DevTools, or by adding the rule `background: red;` on jsFiddle and observing what gets colored. – Andrew Myers Mar 25 '16 at 18:50