Hey guys. How can I keep inline the product name? As you can see 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.
CSS
.product-feature {
display: inline-block;
text-align: center;
position: relative;
max-width: 100%;
font-family: 'Vitesse-Bold';
}
.product-item-details .product-item-name {
font-weight: 700;
font-size: 14px;
margin-bottom: -4px !important;
}
.product-item-details {
overflow-wrap: break-word;
}
.product-item-name {
display: block;
overflow-wrap: break-word;
margin: 5px 0;
webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}
.product-item-details .product-item-name a {
font-size: 14px;
font-weight: 700;
font-family: Vitesse-Bold;
color: #333;
text-transform: capitalize;
display: inline-block;
word-break: : break-all;
}
.product-item-details .product-item-name a:hover {
color: #333;
text-decoration: underline !important;
}
.product-image-container {
display: inline-block;
max-width: 100%;
}
.product-image-wrapper {
display: block;
height: 0;
overflow: hidden;
position: relative;
z-index: 1;
}
.product-image-photo {
bottom: 0;
display: block;
height: auto;
left: 0;
margin: auto;
max-width: 100%;
position: absolute;
right: 0;
top: 0;
}
.product-item-brand {
font-family: Vitesse-Light;
font-size: 14px;
line-height: 1.42857143;
margin: 0 0px 0px;
}
.product-item-details .product-item-brand {
min-height: 20px;
}
.product-price-details {
margin: 0px 0 25px;
font-family: Vitesse-Light !important;
font-size: 14px !important;
line-height: 1.42857143;
color: #222;
}
.product-price-details .price {
font-weight: 700;
white-space: nowrap;
}
HTML
<div class="product-feature">
<a href="details.php?view_product=<?=$row['product_id']?>&id=<?=$row['segment_id']?>" class="product-item-photo" tabindex="-1">
<span class="product-image-container" style="width: 307px;">
<span class="product-image-wrapper" style="padding-bottom: 100%;">
<img class="product-image-photo" src="../admin/<?=$row['product_image']?>" alt="<?=$row['product_name']?>" width="307" height="307">
</span>
</span>
</a>
<div class="product-item-details">
<strong class="product-item-name">
<a href="details.php?view_product=<?=$row['product_id']?>&id=<?=$row['segment_id']?>"><?=$row['product_name']?></a>
</strong>
<p class="product-item-brand"><?=$row['product_brand']?></p>
<div class="product-price-details">
<span class="price">₱<?=number_format($row['product_price'], 2)?></span>
</div>
</div>
</div>
Ray.H
December 1, 2017, 4:36pm
2
Yes, that’s the problem.
The 1st line of text on the right image has been forced to wrap to a new line for one word.[quote=“zxcyeezus, post:1, topic:282746”]
Then the names must all stay on the same amount of lines.
1 Like
PaulOB
December 1, 2017, 5:59pm
4
zxcyeezus:
What should I do?
Try this:
.product-feature{vertical-align:top;}
3 Likes
Ray.H
December 2, 2017, 2:16am
5
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 names and prices lined up too.
As seen here …
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Product Caption</title>
<style>
.product {
display: inline-table;
vertical-align: top;
width: 250px;
height: 315px; /* controls the space of the .name div*/
margin: 10px;
border: 1px solid;
background: #fff;
}
.image,.name,.brand,.price {
display: table-row;
text-align: center;
}
.product span {
display: block;
padding: 4px;
}
.image {
height: 200px;
text-align: center;
word-spacing: -1em;
}
.image::before,
.image img {
display: inline-block;
vertical-align: middle; /* or 'top' or 'bottom' */
}
.image::before {
content:"";
height: 200px;
width: 0;
}
.image img {
margin: 0 auto;
background: lime;
word-spacing: normal; /* reset for img alt text */
}
img.sml {width: 140px; height: 140px} /*testing with mixed img sizes*/
img.med {width: 160px; height: 160px}
img.lrg {width: 180px; height: 180px}
.name { /*allows for wrapping text without a table min-height*/
background: wheat;
}
.name span {
padding: 10px 5px 5px;
font-weight: 700;
}
.brand, .price {
height: 1px;
}
.price span {
padding: 4px;
background: yellow;
}
</style>
</head>
<body>
<div class="product">
<div class="image">
<img class="sml" width="140" height="140" alt="Image Alt Text">
</div>
<div class="name">
<span>Product Name Long</span>
</div>
<div class="brand">
<span>Product Brand</span>
</div>
<div class="price">
<span>$100.00</span>
</div>
</div>
<div class="product">
<div class="image">
<img class="lrg" width="180" height="180" alt="Image Alt Text">
</div>
<div class="name">
<span>Product Name Longer Product Name Wraps</span>
</div>
<div class="brand">
<span>Product Brand</span>
</div>
<div class="price">
<span>$200.00</span>
</div>
</div>
<div class="product">
<div class="image">
<img class="med" width="160" height="160" alt="Image Alt Text">
</div>
<div class="name">
<span>Product Name</span>
</div>
<div class="brand">
<span>Product Brand</span>
</div>
<div class="price">
<span>$100.00</span>
</div>
</div>
</body>
</html>
4 Likes
Up. This works!! Thank you.
PaulOB
December 2, 2017, 7:07am
9
It will work with different height images Ray because of the way the thing has been set up. There is just enough code above to test:)
1 Like
Ray.H
December 2, 2017, 2:11pm
11
OK, I think I see it now.
It looks like this img rule is scaling (or skewing) down any image that might be too large for the image-container.
.product-image-photo {
bottom: 0;
display: block;
height: auto;
left: 0;
margin: auto;
max-width: 100%;
position: absolute;
right: 0;
top: 0;
}
1 Like
system
March 3, 2018, 10:08pm
13
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.
