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

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

Home Forums Support change nav font on tablet and change footer widget width on tablet

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #652198
    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

    GP Premium 1.7.1
    #652327
    Tom
    Lead Developer
    Lead Developer

    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 ๐Ÿ™‚

    #653604
    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!

    #653828
    Tom
    Lead Developer
    Lead Developer
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.