Return to previous page

Item name length - by Goostaf - on WordPress WooCommerce support

This topic has 18 replies, 3 voices, and was last updated 4 years, 3 months ago ago by Goostaf

Goostaf

Participant

November 16, 2020 at 18:10

Hello, our names in the products are different in length and it turns out that the cards are not horizontally aligned, if one name is short and the other is long, for example, it is impossible to make all the cards aligned? If we take the abbreviation of the title (Product Title Chars Limit), then in order to be exactly on the mobile, almost the entire title needs to be cut off. https://ibb.co/0VJY3Cr
https://ibb.co/f4t37r0
https://ibb.co/RgBHgyy

#259864 Copied Theme version: .0.0.1 WooCommerce version: Last

17 Answers
Olga Barlow

Participant

November 16, 2020 at 19:57
Hello,

Add the following code to Theme Options > Custom CSS

/* ========= To align products ========== */ .main-products-loop .product, .products-loop .product, .carousel-area .product-slide .product { display: flex; justify-content: center; } .products-loop .ajax-content, .products-loop { display: flex; flex-wrap: wrap; flex: 1; } .content-product { flex-direction: column; justify-content: space-between; display: flex; flex: 1; } .content-product .quantity-wrapper { margin-right: auto; margin-left: auto; }

Regards
#259895 Copied
Goostaf

Participant

November 16, 2020 at 20:17

Thanks, it works in directories, but not on the main page, we have a carousel there too.

#259903 Copied
Rose Tyler

Support staff

November 17, 2020 at 09:05
.products-slider.swiper-container { display: flex; align-items: stretch; flex-wrap: wrap; } .products-slider .product-slide .product { display: flex; height: 100%; } .products-slider .swiper-wrapper { height: auto; } .content-product .product-title { line-height: 2.5ex; min-height: 5ex; }

Regards
#259945 Copied
Goostaf

Participant

November 17, 2020 at 17:29

Thank you:)

#260056 Copied

Goostaf

Participant

November 17, 2020 at 19:53

Thank you, everything works, I put 2 codes, but I noticed that in the category, the second product falls below in the first line for some reason (Screenshot)

Please contact administrator
for this information.

#260088 Copied

Goostaf

Participant

November 17, 2020 at 22:05

And also the lines disappeared partially around the cards (Screenshot)

Please contact administrator
for this information.

#260108 Copied

Goostaf

Participant

November 17, 2020 at 23:20

And the navigation elements with the latest code and the frame for products are also disappearing

Please contact administrator
for this information.

#260115 Copied

Olga Barlow

Participant

November 18, 2020 at 17:23

Hello,

Could you, please, provide us with temporary Wp Dashboard access to log in and try to fix the issue?

Regards

#260231 Copied

Goostaf

Participant

November 18, 2020 at 18:43

Sure

Please contact administrator
for this information.

#260261 Copied

Goostaf

Participant

November 18, 2020 at 18:48

And, if possible, raise the line up, it is the second row, thanks a lot in advance (screenshoot)

Please contact administrator
for this information.

#260264 Copied

Olga Barlow

Participant

November 19, 2020 at 19:07

Hello,

1) Could you, please, provide us with link to the category where you faced the problem on mobile device?

2) I see that line is added only for the right side in the custom CSS http://prntscr.com/vmcl7y So, tell me how you want to show the lines?

3) Navigation fixed.

4) Check titles now.

Regards

#260410 Copied

Goostaf

Participant

November 20, 2020 at 10:27

1) In any category, attach a link, remove the code that was dropped above and everything becomes normal.
2. Also, something happens to the banner, I remove the code, everything is in order.
3. Also, for some reason, the logo and the phone are not centered in the mobile version.
4. I don’t understand about the lines, they are only in one row of goods, they are no longer below, and why only on the right?)) Either do it everywhere, or remove it altogether, if possible. Thank you so much. I’ve removed the code for now

Please contact administrator
for this information.

#260488 Copied

Goostaf

Participant

November 21, 2020 at 23:41

4. With the line, we decided it was some style in the line, sorry.

#260675 Copied

Olga Barlow

Participant

November 23, 2020 at 15:13

Hello,

1) Check the categories on mobile now.
2) Check the banner.
3) Check now.

Regards

#260840 Copied

Goostaf

Participant

November 23, 2020 at 18:59

Thank you so much,
1. I still leave the second item in the 1st row down (Iphone 6), maybe that’s the only way of course.
2. Thank you
3. Thanks

4. I also noticed in the mobile subcategory they also go to the 1st row and stuck to the goods, you can’t separate the goods somehow? (I attach screenshots)
Thank you for everything, you do a lot for us, I really like the template!

Please contact administrator
for this information.

#260899 Copied

Olga Barlow

Participant

November 23, 2020 at 19:49

Hello,

1) Check the products now.
4) Unfortunately, there is no way to separate it with the existing HTML structure of the page.

Regards

#260911 Copied

Goostaf

Participant

November 24, 2020 at 08:23

Thank you very much, everything works.

#260944 Copied
Viewing 18 results - 1 through 18 (of 18 total)