Handheld (mobile) footer bar (menu)

  • Resolved bplanchee

    (@bplanchee)


    6 years, 8 months ago

    Hi all,

    I’ve been looking everywhere online and in the Storefront code, but could not find the solution..

    Is there a way to make the handheld footer smaller? (Change the height/size)

    There are ways to delete the whole thing, to add columns, change icons… But how do I change the size? Also adding CSS like:

    .storefront-handheld-footer-bar {
height: 50px;
}

    does only partially solve the problem: the bar is smaller but icons don’t scale with it.

    Who’s got the magic touch to this? ??

    Thanks!

    • This topic was modified 6 years, 8 months ago by bplanchee.
Viewing 3 replies - 1 through 3 (of 3 total)
  • jessepearson

    (@jessepearson)

    Automattic Happiness Engineer

    @bplanchee These two rules help with reducing the height of the bar, the heights are reduced, and the original sizes are in the commented out areas:

    .storefront-handheld-footer-bar ul li>a {
    height: 3em; //4.235801032em
}

.storefront-handheld-footer-bar ul li > a::before {
    line-height: 2; //2.618046972
    font-size: 1.4em; //1.618em
}
    Thread Starter bplanchee

    (@bplanchee)

    Aha, thanks Jesse! That seems to do the trick!

    Although, there seems to be something wrong with the icons when sized down (they show as small squares (=unknown ASCII?) on a real mobile device (iPhone 5SE). It looks fine on desktop Chrome in developer tools though.

    What could be the issue and fix?

    EDIT: Deleting cache seemed to have solved the problem!

    • This reply was modified 6 years, 8 months ago by bplanchee.
    jessepearson

    (@jessepearson)

    Automattic Happiness Engineer

    @bplanchee Glad that worked, going to set this as resolved now ??

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Handheld (mobile) footer bar (menu)’ is closed to new replies.