Archived topic
Adjust letter spacing on tablet mode
7 replies · Started by Tony on June 12, 2021
hi Gp,
I know this is an old post, but I’ve just inserted the above code for letter spacing for the main navigation, and it works great.
I’ve adjusted it to 4.4px on mine. however, when I view on tablet mode, the letter spacing is way to big and the main menu items flow down below…how to I do it so it automatically adjusts itself to fit screen on tablet as well.
Hi Tony,
It won't automatically adjust the letter spacing.
You'll need to give it another value by using media query, eg: @media (max-width: 768px)for mobile,@media (min-width: 769px) and @media (max-width: 1024px)for tablet.
hi Ying,
so how would i go about doing that in css?
Could you link me to the site?
hi Ying,
i've given you a temp login...and the direct link to the site...i've made the letter spacing smaller, have a look, but i want it to be 4.4px but that overflows on the tablet.
For tablet, you could try this CSS to lower the letter spacing:
@media (min-width: 768px) and (max-width: 1024px) {
.main-navigation .main-nav > ul > li > a {
letter-spacing: 2px;
}
}Alternatively, you could consider setting a drop point:
https://docs.generatepress.com/article/navigation-drop-point/
hi Ying,
thank you for the above code, but i've opted for adjusting the 'menu item width' via the customiser instead of adding more code. Thank you nonetheless, much appreciated.
Sounds good!
You are welcome :)
