- This topic has 1 reply, 2 voices, and was last updated 4 years, 10 months ago by
.
-
Posts
-
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!
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;
- The topic ‘Responsive Icons?’ is closed to new replies.