Responsive Icons?

[JayE]

New to this theme and quite happy with most of the features. Need help on the #site-top-right. Customize css? Problem:

It appears that the search, login, and cart icons do not resize when viewed on tablet/phone screens. I’d rather our site logo be lgr size than those 3 icons on phone screens. How to resolve? Possible to make the icons (their descriptors) be part of the nav bar? Thanks for the help!

[Andy]

This is the relevant CSS for screen widths below 768px, if you want to change any of the values to make more space for your logo:

@media only screen and (max-width: 768px){

    /*width of logo area -> minmax(auto, calc(100% - 179px))*/
    /*width of #site-top-right -> 155px*/
    /*width of menu icon area -> 24px*/
    #masthead > .container {
        grid-template-columns: minmax(auto, calc(100% - 179px)) 155px 24px;
    }

    #masthead .icons {
        font-size: 16px;
    }

    #masthead .top-account,
    #masthead .top-cart {
        margin-left: 20px;
    }

}

If you decrease the width of the #site-top-right you can increase the maximum width of the logo area by the same amount.

grid-template-columns: minmax(auto, calc(100% - 179px)) 155px 24px;

–> decrease 155px to 120px, so increase 179px to 214px becomes:

grid-template-columns: minmax(auto, calc(100% - 214px)) 120px 24px;

[Author]

Posts