Keep inline products isotope

[zxcyeezus]

How do I keep this inline? Even vertical-align: top; is not working. As you can see on the image of the product is not perfectly align or not inline. I think the problem is the product name. The product name should be inline. Btw I’m using an isotope jquery. What should I do?

//Container of each products
.product-feature {
	text-align: center;
   	position: relative;
   	max-width: 100%;
   	font-family: 'Vitesse-Bold';
   	vertical-align: top;
}

//Product-Item-Details and Product name(Font Size)
.product-item-details .product-item-name {
	font-size: 14px;
   	margin-bottom: -4px !important;
}

//Class of product name
.product-item-name {
	word-wrap: break-word;
	margin: 5px 0;
	webkit-hyphens: auto;
   	-moz-hyphens: auto;
    hyphens: auto;
}

//Product Item name font style, colors, text-transform
and etc.
.product-item-details .product-item-name a {
	font-size: 14px;
	font-weight: normal;
	font-family: Vitesse-Bold;
	color: #333;
   	text-transform: capitalize;
   	display: inline-block;
   	word-break: break-word;
}

//Hover item name
.product-item-details .product-item-name a:hover {
	color: #333;
   	text-decoration: underline !important;
}

//Container of each product image
.product-image-container {
	display: inline-block;
   	max-width: 100%;
}

//Wrapper of Image
.product-image-wrapper {
	display: block;
	height: 0;
	overflow: hidden;
	position: relative;
	z-index: 1;
}

//Product-image Photo
.product-image-photo {
	display: block;
	margin: auto;
	height: auto;
	max-width: 100%;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	bottom: 0;
}

//styles of brands
.product-item-brand {
	font-family: Vitesse-Light;
   	font-size: 14px;
   	line-height: 1.42857143;
   	margin: 0 0px 0px;
}

//min-height of product-brand
.product-item-details .product-item-brand {
   	min-height: 20px;
}

SS:

[Ray.H]

@zxcyeezus

Even vertical-align: top; is not working. As you can see on the image of the product is not perfectly align or not inline. I think the problem is the product name. The product name should be inline.

I saw this coming in your other thread of this same subject.

Perhaps if you were to review my previous reply it might be of some help.

Keep inline product name

If your images are all the same height then Paul’s suggestion should work. Without a link to your site or live page we are just getting a glimpse of only one <div class="product-feature">. It shows some inline styles setting width on the product-image-container and dimensions for the img. Are all the other product-feature divs styled the same way? Using inline-table I was able to come up with a product-caption that allows for two lines of text for the product name. Then it keeps the brand nam…

[Ray.H]

I do see that it’s the third item in each row that is effected.

I also see that longer titles are wrapping and still sitting inline with shorter titles, as seen with the 1st and 2nd item in the middle row of your ss.

You will need to post a link to a working page or post a working page that shows us the problem. We can’t debug a picture.