Category menu in mobile

Hi, I can’t solve this problem: the names of categories in the mobile version have different lengths and therefore the pictures are displaced horizontally (I attach a photo) how to make a description inside the picture or make sure that they do not shift horizontally relative to each other.

In the desktop version, I don’t need the category names inside the picture (

Thanks in advance for your reply

Attachments:

You must be logged in to view attached files.

Hello,

Please provide the URL of the page to check it myself and help you out accordingly.

Best Regards.

https://smegonline.kz/

Hello,

To move the titles in the images try adding the following Custom CSS in the Custom CSS for Mobile area under Theme Settings >> Custom CSS.

.category-grid-item .hover-mask {
    position: absolute;
    top: 40%;
    text-align: center;
}

Regards.
Xtemos Studios.

Thank you, the text is now in the picture. But there is no Blue frame, I cannot add it. Please tell me what to do? I copied everything correctly.

Attachments:

You must be logged in to view attached files.

Hello,

You are Most Welcome.

Please try and replace the previous Custom CSS with the following in the Custom CSS for Mobile area under Theme Settings >> Custom CSS.

.category-grid-item .hover-mask {
    position: absolute;
    top: 40%;
    text-align: center;
    background-color: blue;
}

.product.category-grid-item .wd-entities-title {
    color: white;
}

Best Regards.

Thanks, and one last thing, how can I make the font smaller for these categories?
I add code like this:

.category-grid-item .hover-mask {
position: absolute;
top: 70%;
text-align: center;
background-color: rgb(38,69,147);
}
.product.category-grid-item .wd-entities-title {
color: white;
font-size: 12pt;
}

in the Custom CSS for Mobile area under Theme Settings >> Custom CSS.

But the font doesn’t change
Thanks in advance for your reply

Hello,

You are Most Welcome.

Please try the following Custom CSS for that.

.product.category-grid-item .wd-entities-title {
    font-size: 12pt !important;
}

Best Regards.

Sorry
It didn’t work for me
This is how it is written

And I crumbled the screenshot, the font size has not changed (((
Please see what I can do to reduce it)

.category-grid-item .hover-mask {
position: absolute;
top: 70%;
text-align: center;
background-color: rgb(38,69,147);
}
.product.category-grid-item .wd-entities-title {
color: white;
}
.product.category-grid-item .wd-entities-title {
font-size: 12pt !important;
}

Attachments:

You must be logged in to view attached files.

Excuse me please, do you have a solution for my question?

Hello,

Please Replace the previous Custom CSS I provided with the following then check back.

.product.category-grid-item .wd-entities-title {
    font-size: 11px!important;
    color: white;
}

This will surely fix your issue.

Best Regards

Thanks for your reply
I think that something did not work, since the line is now highlighted in red. And the font size has not changed, as well as the white text color has disappeared.

This is some kind of evil magic
does not allow to solve a small problem))))
I look forward to your reply, thank you!

Attachments:

You must be logged in to view attached files.

This is what the code looks like now

Attachments:

You must be logged in to view attached files.

Hello,

I saw the screenshots you attached.

There is a SYNTAX error in the CSS you added. You need to close the above CSS class properly to make the below code working.

Please close the above CSS braces. OR provide the login details of the website.

Regards.
Xtemos Studios.

Forgive me for my inattention, I did everything, everything works, thank you very much!

Hello,

If you do not mind, can you please leave a 5 stars rating for our Theme & Customer and Technical Support by going here: http://themeforest.net/downloads It will allow us to release more updates and provide dedicated support in future. It would encourage our work a lot. If you like our Theme and Support.

Thanks for contacting us.
Have a great day :-)

Topic Closed.
Best Regards.

[Author]

Posts