Category Carousel names, appear all in one row.

Hello,
I have created a product carousel using your element. The problem is that on small devices, the text goes below the image and not on top, but also the text appears all in one line. You can check the image that I am pasting below.

Is there any solution to that?

Best Regards

Hello,

In the settings for the “Product categories” element you have defined the “line-height” value as 1px, so that value is not right, you need to set there e.g 20px or set the value in the “EM” (more detail in the below screenshot).

https://prnt.sc/rNnQ4gJXGIVr

If you have any other questions or concerns, please do not hesitate to reach out, I’d love to help!

Kind Regards

Hello,

Thank you for your reply. I have changed this to em and up to 1.2 value and now it appears correctly. Thank you for pointing out this error.

I would like to ask if, on mobile devices, it is possible for the title to be on the bottom of the image and not below the image. (Referring to the same element.)

Best Regards

Hello,

Please try to use the below code, enter it into the “Custom CSS for mobile” area in Theme Settings -> Custom CSS.

.wd-categories-wrap .cat-design-center .hover-mask {
    position: absolute;
    right: 0;
    left: 0;
    z-index: 3;
    transition: transform .3s ease;
}

.wd-categories-wrap .cat-design-center.without-product-count .hover-mask {
    transform: translateY(-50%) translateZ(0);
}

.wd-categories-wrap .cat-design-center .wd-entities-title {
    color: #fff;
}

Don’t hesitate to let me know if you need any further help or any other info.

Kind Regards

Everything seems to work well now. Are there any class changes on the mobile (landscape) or i can use the above code also in that CSS box?

You can just add the above code to the “Custom CSS for mobile landscape” area and it will work on the landscape.

Kind Regards

Thank you for your help.
Feel free to mark this topic as resolved.

Best Regards

I’m glad we managed to sort this out.

If there’s anything you need, please write me or another member of our help desk team.

We’re here for you!

Kind Regards

[Author]

Posts