How can I avoid offset of products in one row

Hello,

depending on lenght of product name I have a offset between the products in one row. Is there any way to avoid this offset?

regards

Torsten

t.willems wrote:

Hi Torsten,

Can you be more specific on what issue you have faced or what you tried already? Or include an image so we can guide you?

Regards,

Krunal

Team nopAccelerate

Hello,

sorry for my late answer. Much to do.

In the Image you see the third product, where the Buy-Button (Kaufen) is one line under the other Buy-Buttons.


We want all Buy-Buutons in one line.

Do you have a solution?

Best Regards

Torsten

Hello-

You can either set the item-box to have a fixed "height" in the CSS that allows for those products in which the product name wraps:
.item-box {
    float: left;
    width: 216px;
    margin: 0 10px 20px 0;
    box-shadow: 0 1px 5px rgba(0,0,0,.15);
    background: #fff;
    padding: 10px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    height: 380px;
}


..or you can restrict the product name to only display a set number of characters to prevent the wrap by editing the product names normally, or by using a string manipulation function in the /Views/Shared/_ProductBox.cshtml code view.

Hello,

I've put the code into css, a shadow appears, I can put in different heights successfully, but the buy button remains at the same level, depending on the string length of product name.
Is there perhaps another thing to consider?



The complette code of the item-box:

.item-box {
    float: left;
    width: 216px;
    margin: 0 10px 20px 0;
    box-shadow: 0 1px 5px rgba(0,0,0,.15); /*zeigt, dass der Kaufen-Butten unter der Box ist*/
    background: #fff;
    padding: 10px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    height: 450px;
}
.item-box .picture {
  z-index: 1;
  overflow: hidden;
  background-color: #fff;
    margin: 0 0 20px;
}
.item-box .picture a {
  display: block;
  position: relative;
}
.item-box .picture a:before {
  content: "";
  display: block;
  padding-top: 100%;
}
.item-box .picture a img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  max-width: 100%;
  max-height: 100%;
  margin: auto;
    -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  -webkit-transform: translateZ(0) scale(1.0, 1.0);
}
.item-box:hover .picture a img {
  opacity: 0.85;
}
.item-box .details {
  padding: 0 10px;
}
.item-box .product-title {
  margin: 0 0 10px;
  overflow: hidden;
  font-size: 17px;
    line-height: 1.2;
  font-weight: normal;
  color: #000000; /*Anzeige der Produkttitel in der Liste/Tabelle vorher: @#4ab2f1;*/
}
.item-box .product-title a {
  display: block;
}
.item-box .product-title a:hover {
  color:  #45842C; /*dunkelgrün Hover Produkttitel*/
}
.item-box .product-rating-box {
    display: inline-block;
  margin: 0 0 10px;
}
.item-box .rating {
  background: url('../images/rating1.png') repeat-x;
  width: 95px;
    height: 14px;
}
.item-box .rating div {
  background: url('../images/rating2.png') repeat-x;
    height: 14px;
}
.item-box .description {
  display: none;
}
.item-box .description a {
  display: block;
  overflow: hidden;
}
.item-box .prices {
    margin: 0 0 10px;
    overflow: hidden;
}
.item-box .old-price {
  margin: 0 5px 0 0;
  font-size: 16px;
  color: #aaa;
  text-decoration: line-through;
}
.item-box .actual-price {
  margin: 0 5px 0 0;
  font-size: 16px;
  color: #E42A1C; /*Produktpreis in der Liste/Tabelle vorher: #666;*/
}
.item-box .tax-shipping-info a {
  color: #000000;
}
.item-box .tax-shipping-info a:hover {
  text-decoration: underline;
}
.item-box .buttons {
  margin: 0;
    font-size: 0;
}
/*Kaufen Button*/
.item-box input[type="button"] {
  display: inline-block;
  height: 40px;
  border: none;
  vertical-align: middle;
}
.item-box .product-box-add-to-cart-button {
  width: 60%;
  background-color: #22492d; /* dunkelgrün Buttons Kaufen in der Liste/Tabelle vorher: - vormals blau:#157294;*/
  text-align: center;
  font-size: 15px;
  color: #fff;
  text-transform: uppercase;
}
.item-box .product-box-add-to-cart-button:hover {
  background-color: #4d9d56; /*Mittelgrün Hover Buttons*/
}
.item-box .add-to-compare-list-button,
.item-box .add-to-wishlist-button {
  width: 20%;
  border-left: 1px solid #fff !important;
  background-color: #eaeaea;
  background-position: center;
  background-repeat: no-repeat;
  font-size: 0;
}
.item-box .add-to-compare-list-button {
  background-image: url('../images/compare-button.png');
}
.item-box .add-to-wishlist-button {
  background-image: url('../images/wishlist-button.png');
}
.item-box .add-to-compare-list-button:hover,
.item-box .add-to-wishlist-button:hover {
  background-color: #ddd;
}

Best Regards

Torsten

I'm just guessing, but maybe you just need to increase the height a little more? Maybe 480px?? Or adjust the margins in the same div?

Also, you can try changing the bottom margin or padding on the .prices class...

You have to options:

1) Increase the title height:

.item-box .product-title {
  margin: 0 0 10px;
  overflow: hidden;
  font-size: 17px;
    line-height: 1.2;
  font-weight: normal;
  color: #000000; /*Anzeige der Produkttitel in der Liste/Tabelle vorher: @#4ab2f1;*/
height:70px;
}

2) Truncate the title text:

.item-box .product-title a {
  display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

Thanks very much to all,

it works now

regards

Torsten

Tecnofin wrote:

Great suggestion about using an ellipsis on the text-overflow!