html - Making font size responsive with parent div width and height css -
i´m usign font-size: vw;
#foti_module_wrapper .tools-nav-option { color: #666666; font-size: 6.2vw; } #foti_module_wrapper .tool-nav-label { font-size: 3.2vw; line-height: 4px; } #foti_module_wrapper .tool-item { -webkit-box-flex: 1; -webkit-flex: 1 0 auto; -ms-flex: 1 0 auto; flex: 1 0 auto; display: flex; text-align: center; } #foti_module_wrapper .tools-nav-option { -webkit-box-flex: 1; -webkit-flex: 1 0 auto; -ms-flex: 1 0 auto; flex: 1 0 auto; padding: 10px; color: #292929; font-size: 20px; text-align: center; line-height: inherit; cursor: pointer; border: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; z-index: 2; background: white; }
in mobile works fine, in tablet font icon , text overflow tool-item padding...
i want avoid this
definitely use media queries wanted result.
you can use resource snippets save time:
https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
good luck!
Comments
Post a Comment