Home Forums Azuma Responsive Icons?

Tagged: ,

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #9372
    JayE
    Participant

    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!

    #9374
    Andy
    Keymaster

    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;

Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.