This topic has 18 replies, 3 voices, and was last updated 3 years, 4 months ago ago by Goostaf
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
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
Thanks, it works in directories, but not on the main page, we have a carousel there too.
.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
Thank you:)
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)
And also the lines disappeared partially around the cards (Screenshot)
And the navigation elements with the latest code and the frame for products are also disappearing
Hello,
Could you, please, provide us with temporary Wp Dashboard access to log in and try to fix the issue?
Regards
Sure
And, if possible, raise the line up, it is the second row, thanks a lot in advance (screenshoot)
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
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
4. With the line, we decided it was some style in the line, sorry.
Hello,
1) Check the categories on mobile now.
2) Check the banner.
3) Check now.
Regards
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!
Hello,
1) Check the products now.
4) Unfortunately, there is no way to separate it with the existing HTML structure of the page.
Regards
Thank you very much, everything works.
The issue related to '‘Item name length’' has been successfully resolved, and the topic is now closed for further responses