Icons, Buttons placed under MDL header is not responsive in Mobile devices

[CreativeMinds1981]

** PLEASE READ THIS BEFORE FILING AN ISSUE **

Please include the following information with your bug report:

Scenario:
Placing mdl icons , buttons, svg images on the header is not responsive on mobile devices.
I am using the code from https://getmdl.io/components/index.html#layout-section ( using scrollable tabs code ) with 0 customization.

The header responsive works fine with desktops (all inches) and Tablet devices ( all) but fails on mobile

I have added but it doesnt work

What MDL Version are you using? (please be specific, e.g. major.minor.patch)
MDL V1 version ( i didnt know how to check to be honest)

What browser(s) is this bug affecting (including version)?
Its on all mobile devices ( Samsung all editions, sony all editions, Nexus all editions )
What OS (and version) are you using?
Android and IOS

What are the steps to reproduce the bug? Can you create a plunker/codepen/jsfiddle which reproduces it?

https://codepen.io/creativeminds1981/pen/odovWj

What is the expected behavior?

What is the actual behavior?

Any other information you believe would be useful?
I am using http://responsivedesignchecker.com/ to test the responsive on mobile
PS: responsivedesignchecker works with localhost files - you dont need to have a domain name

2. Please add a logo and test, without it you wont be able to reproduce the issue - reason , spacing