Archived topic
change nav font on tablet and change footer widget width on tablet
3 replies · Started by Lisa on August 17, 2018
Hi Tom,
Working on a site in development, and I'd like to have the primary nav font size reduced for tablet so the links remain on one line, tried various css w/o success. Can you advise?
Also, would like to have the footer widgets stay at 50% for mobile and 33% for tablet to keep the footer widget height shorter.
Have added to functions.php:
add_filter( 'generate_footer_widget_1_tablet_width','generate_change_footer_widget_1_tablet_width' );
function generate_change_footer_widget_1_tablet_width()
{
return '33';
}
add_filter( 'generate_footer_widget_2_tablet_width','generate_change_footer_widget_2_tablet_width' );
function generate_change_footer_widget_2_tablet_width()
{
return '33';
}
add_filter( 'generate_footer_widget_3_tablet_width','generate_change_footer_widget_3_tablet_width' );
function generate_change_footer_widget_3_tablet_width()
{
return '33';
}
and css:
@media (max-width: 1025px) and (min-width: 768px) {
.inside-footer-widgets>div:nth-child(odd) {
clear: none;
}
}
The widgets are not breaking out into 100% until later than normal but still too soon for my preference. Again, tried editing the css w/o success. Not sure if mobile width filters should be added or how they are written for mobile.
Appreciate any recommendations you can provide.
Thank you!
Lisa
Hi there,
For the menu, try this:
@media (min-width: 768px) and (max-width: 1024px) {
.main-navigation a {
font-size: 13px;
}
}The footer widgets are going 100% wide at 768px, which is the typical width for mobile devices. I'm not sure if 3 columns would work at that width?
Let me know :)
That did the trick on the navigation, thank you. Will take your advise on the footer size on mobile.
Thank you again for all your help!
No problem :)
