Product description alignment on mobile screen

[neerajgulati]

Hi,

The product description i.e. the text and the price are not displaying properly which leads to the entire product gallery to loose alignment.

Please find the problems in the attached screenshots.

Thanks

Attachments:

You must be logged in to view attached files.

[Kyle – SUPPORT]

Hi

Add this to your custom css:

ul.products li.product .product-details {
  float: left;
  text-align: left;
}

.woocommerce ul.products li.product .price {
  text-align: right;
}

– Kyle

[neerajgulati]

Hi Kyle,

Thanks for this one. The alignment is sorted.

The products on mobile screen are still going out of alignment (Please refer to the screenshot attached). What I think is happening is that on the mobile screen based on the size of the screen the images become smaller while the text remains the same size which leads to the alignment going out of order.

Please help in sorting this out. Thanks

Attachments:

You must be logged in to view attached files.

[Kyle – SUPPORT]

There’s not really any way around that I’m afraid, unless I provide you with some custom css that will set the title to a max of say 2 lines, which means some titles will be cut off

– Kyle

[neerajgulati]

Hi Kyle,

Is there a way to make the font size smaller for product name across the site. Hopefully this should make things better.

Thanks

[Kyle – SUPPORT]

Try this:

.woocommerce ul.products li.product h3, .woocommerce-page ul.products li.product h3 {
  font-size: 13px;
}

[neerajgulati]

Thanks Kyle, this works fine.
Now is it possible to hard code the product name to 3 lines. Essentially for anything more 3 lines will get truncated and anything less than three lines will have empty space.

Thanks

[Kyle – SUPPORT]

Try this:

@media only screen and (max-width: 479px) {
body .woocommerce-shop-page ul.products li.product, body .product_list_widget > div > ul.products li.product {
max-height: 350px;
overflow: hidden;
text-overflow: ellipsis;
min-height: 350px;
}
}

That’s the best I can do

– Kyle

[neerajgulati]

Hi Kyle,

This works perfect!

Thanks!

[Kyle – SUPPORT]

Great 🙂 No problem

[dreikunst]

Hey,

I have some alignment questions for shop and cart section.

1) shop page: is it possible to set all prices under the article pictures to the left.see att. screenshot “screen1.jpg”

2) set all cart elements to the left under the headers. like att. “screen2.jpg”

3) same like screen3.jpg

Attachments:

You must be logged in to view attached files.

[Kyle – SUPPORT]

Hi

1) Yes, add this to your custom css:

.woocommerce ul.products li.product .price {
  text-align: left;
}
ul.products li.product .price {
  float: left;
}
ul.products li.product .product-details {
  width: 100% !important;
}

2 & 3) Unfortunately not sorry, as they are built using tables

– Kyle

[dreikunst]

Thank you for the quick answer.

and is it possible at the “additional information” tabs?

[Kyle – SUPPORT]

Is what possible?

– Kyle

[dreikunst]

to set the alignment to the left. or is it also a table which is used there?