Footer Menu Not Aligned on Mobile Device

Hello,

The footer menu on http://www.houseofcindy.com/ is aligned well on normal (desktop) screen width, but on mobile device it is not organized neatly (see Screenshot 1). I need help with the CSS so the footer menu looks like Screenshot 2 (when mobile device has vertical orientation).

Chris

  • Adam Czajczyk

    Hello LaunchGo,

    I hope you're well today and thank you for your question!

    The solution here would be to add a few custom CSS rules wrapped in CSS media queries. Below is an example for screen resolutions up to 360px width that will put all footer menu elements in a single column (instead of three) "one below another" and center them on screen:

    @media screen and (max-width: 380px) {
    #menu-footer-main > li {width:100%;clear:both;}
    }

    Using this code as an example you can create more sets of rules for bigger screens, if necessary. The code should be added to your theme's child theme style.css file (if you're using any child theme) or via a plugin such as Simple Custom CSS

    Please note though that the menu in footer of your site includes "child menus" (drop down menus) and these are not included in this CSS code. I'd strongly suggest creating a new menu for footer that would not include drop-down submenus as this would play much better with responsive views.

    Best regards,
    Adam

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.