Responsive problem

Hello,
i have used this code for change the appearence of categories
.cat-design-default .hover-mask {
position:relative;
background:none;
bottom: 0;
left: 0;
box-shadow: 1px 1px 3px rgba(136,136,136,0);
background-color: #00a4e1;
transform: translateX(0);
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-o-transform: translateX(0);
}
Now,there is a problem with some descriptions that do no fit correctly.
For example this category it is not complete.
What should i change?

Hi,

Seems that you have too long categories names. You can try to decrease a font size for them to make them fit the space.

Regards

How can i decrease the font size for categories?

Also,can you please help me with the menu?
In html block i have 4 elements.If i set 1/4 in column settings it does not fit.I tried also set 1/1,but the photo is very big and does not fit.
And i see that is always open in mobile(not in hover like in desktop).
Also how can i change the font color of submenu items?Now is not visible.

Attachments:

You must be logged in to view attached files.

Here is a code to decrease the font size

div.cat-design-default .hover-mask h3 {
	font-size:12px;
}

Currently, our mobile navigation doesn’t support dropdowns with HTML Blocks like our main mega menu.

Hello,
so mega menu is not responsive?

There is no mega menu on mobile devices at all. As all other themes, our theme has a sidebar navigation for smaller screens. And the mega menu is hidden because it has a lot of content that can’t fit the space well.

So,how can i create a mobile menu like in your demo?

You just need to create a separate menu in Appearance -> Menus and set it to the mobile navigation location instead of the main menu.

Ok,about categories,how can i set a default size for grids because now they have different sizes depending on the description?
I want to make them all in the size of large description.

Attachments:

You must be logged in to view attached files.

Try this CSS code

.cat-design-default .hover-mask h3 {
    min-height: 60px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

[Author]

Posts