Thank you. It improves, however, I uploaded some icons and those are not shown well, those are oversized. I tried with the next code in the CSS, but it did not work.
.hasmegamenu ul.sub-menu li { background-size: contain; /* Ajusta el tamaño de la imagen para que esté completamente visible */ background-repeat: no-repeat; /* Evita que la imagen se repita */ background-position: center; /* Centra la imagen */ border-radius: 8px; margin: 0.5rem; padding: 0.5rem; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); transition: background-size 0.3s ease; }
.hasmegamenu ul.sub-menu li:hover { background-size: cover; /* Ajusta el tamaño de la imagen para que cubra el área del elemento */ }
Hello.
I eliminated the previous type of services and created new ones. However, the some issues were comming:
1. Filter in the "Find tutor" page is not working any more
2. Filter when I selected Pages in the main menu is not working
3. What is the recommended size for the images from services
4. What are the recommendation for the maximum number of subservices and services? or how to adjust the space for the Services in the menu?
Thanks in advance
Attached files: 1.png
2.PNG
3.png
Please try adding this custom css in your wp-admin-> appearance-> customize -> custom css :
a.service_type_term_block { text-shadow: 1px 2px 5px rgba(0,0,0,0.5); padding: 1rem; background: rgba(0,0,0,0.15); } .hasmegamenu ul.sub-menu { width:90vw !important; } .mega_menu_term_list{ max-width:30vw; }Thank you. It improves, however, I uploaded some icons and those are not shown well, those are oversized. I tried with the next code in the CSS, but it did not work.
a.service_type_term_block { text-shadow: 2px 3px 6px rgba(0, 0, 0, 0.4); padding: 1rem; background: rgba(255, 255, 255, 0.2); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 8px; color: #333;
}
.hasmegamenu ul.sub-menu { width: 90vw !important; background-color: rgba(255, 255, 255, 0.9); border: 1px solid rgba(0, 0, 0, 0.1); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); padding: 1rem; list-style: none; display: flex; flex-wrap: wrap;
}
.mega_menu_term_list { max-width: 30vw; background-color: rgba(255, 255, 255, 0.8); padding: 1rem; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); color: #444; margin: 1rem; flex: 1 1 auto;
}
.hasmegamenu ul.sub-menu li { background-size: contain; /* Ajusta el tamaño de la imagen para que esté completamente visible */ background-repeat: no-repeat; /* Evita que la imagen se repita */ background-position: center; /* Centra la imagen */ border-radius: 8px; margin: 0.5rem; padding: 0.5rem; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); transition: background-size 0.3s ease;
}
.hasmegamenu ul.sub-menu li:hover { background-size: cover; /* Ajusta el tamaño de la imagen para que cubra el área del elemento */
}
Attached files: 017-philosopher.png
1.png
Please try adding this custom css in your wp-admin-> appearance-> customize -> custom css :
.service_type_term_block strong{
font-size:1rem;
height:200px;
width:200px;
}
a.service_type_term_block{
background-size:contain;
}
It works. Thanks.