Toolbar responsiveness does not work

[ignacio...@gmail.com]

Hi,

I create a toolbar with icons and when I reduce the width of the screen element are overlapped and also images convert to ovals.

I add several element in the toolbar and elements are overlapped and images are deformed.

<core-toolbar class="headerBar tall">      

      

      <paper-icon-button icon="menu" style="margin-left:0px"></paper-icon-button>

      <span >

        <div layout horizontal>

          <core-icon src="cover.jpg" size="48"></core-icon>

          <div   layout vertical self-center>

            <p>

              <span >text A</span><br>

              <span >Text B</span>

            </p>

          </div>

          <div layout self-center vertical>

            <paper-slider min="0" max="100" value="60" pin="true">

          </div>

          

            <div layout self-center horizontal >

              <p><span >1:51</span></p>

              <div layout self-center vertical>

              <paper-progress value="10"></paper-progress>

              

            </div>

            <p><span >3:40</span></p>

          </div>

        </div>

      </span>

      <paper-icon-button icon="search"></paper-icon-button>

      <paper-icon-button icon="communication:forum"></paper-icon-button>

      <paper-button raisedButton class="colored" label="Upload"></paper-button>

    </core-toolbar>

  

Regards

Ignacio