Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):
@media only screen and (max-width: 690px) {
div[data-style="minimal_small"] .toggle.default h3 a {
font-family: Verdana, Arial, Helvetica, "Lucida Console", sans-serif;
font-size: 14px!important;
}
}
1) I am using toogles on this page and wanted to customize the size and font-type of the toogles header
How do I make this happen?
2) Also, can I further customize these changes to only be visible on mobile devices?
Hey there,
Thanks for reaching in,
Please use this CSS
@media only screen and (max-width: 690px) { div[data-style="minimal_small"] .toggle.default h3 a:hover { font-family: Verdana, Arial, Helvetica, "Lucida Console", sans-serif; font-size:14px!important; } }Hope this helps,
Regards
sorry for the late response. I am still having issues with this.
When I post the code the toogle fonts only when change when hovering. How do I change it so that the font changes when not being hovered?
Hey Again,
Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):
@media only screen and (max-width: 690px) { div[data-style="minimal_small"] .toggle.default h3 a { font-family: Verdana, Arial, Helvetica, "Lucida Console", sans-serif; font-size: 14px!important; } }Thanks
ThemeNectar Support Team
Toogle page
I inserted the codes however i am having issues with the code as its not rendering on mobile. Its still rendering the desktop font sizes
Is there anything that needs to be adjusted?
Right now i am only using (max-width: 690px) and desktop. What are the different screen size recommendations (max-width)?
Hey Again,
The Code seems to be working correctly when added in the Live Browser: http://prntscr.com/iyhfuh .
Best.
ThemeNectar Support Team