Hi, how can I reduce the font size of the submenu element on this page? I would like this change to only take effect on this specific page.
Thanks.
Hey DROR!
Please add following code to Quick CSS
.page-id-30582 .av-subnav-menu li a {
font-size: 11px;
}
Regards,
Yigit
Hi Yigit, how can I make this change only for smaller screens? and also, how can I remove the submenu on tablets and smartphones?
Hey!
Please change the code to following one
@media only screen and (max-width: 1300px) {
.page-id-30582 .av-subnav-menu li a {
font-size: 11px;
}}
@media only screen and (max-width: 990px) {
.page-id-30582 .av-subnav-container {
display: none !important;
}}
Regards,
Yigit
The submenu is still showing on smaller screens.
Hi!
Sorry, please change the code to following one
@media only screen and (max-width: 1300px) {
.page-id-30582 .av-subnav-menu li a {
font-size: 11px;
}}
@media only screen and (max-width: 990px) {
.page-id-30582 .av-submenu-container {
display: none !important;
}}
Regards,
Yigit
Great, thanks.
I also noticed that the text size in the captions showing on hover over the images is very big on mobile. How can I reduce the font size of the captions on mobile devices?
Hey!
Please add following code to Quick CSS as well
@media only screen and (max-width: 767px) {
.avia-tooltip .inner_tooltip {
font-size: 12px; }
}
Regards,
Yigit
That doesn’t seem to work. the text remains the same size.
Hey!
Can you please try adding !important rule as following
@media only screen and (max-width: 767px) {
.avia-tooltip .inner_tooltip {
font-size: 12px !important; }
}
Cheers!
Yigit
Still showing the same font size.
Hey!
I checked Yigit’s code and it should work. Clear browser cache and hard refresh a few times.
Best regards,
Andy