[Resolved] change nav font on tablet and change footer widget width on tablet

[Lisa]

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

[Tom]

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 🙂

[Lisa]

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!

[Tom]

No problem 🙂

[Author]

Posts