I'm trying to build a responsive website with polymer, but for some reason some elements (core-toolbar and paper-fab) don't get scaled on a smaller and more dense screen (see smartphones). From the project I've seen online (IE: http://ift.tt/1qIEqgn, http://ift.tt/1OxiEIV) it seems like I'm the only one having this problem, so I think I'm missing something.
Here's my code along with two screenshots, one from my smartphone, the other one from my PC.
<html>
<head>
<meta charset="utf-8">
<script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
<link rel="import" href="bower_components/core-header-panel/core-header-panel.html">
<link rel="import" href="bower_components/core-toolbar/core-toolbar.html">
<!--<link rel="import" href="bower_components/core-scaffold/core-scaffold.html">-->
<link rel="import" href="bower_components/core-icons/core-icons.html">
<link rel="import" href="bower_components/paper-fab/paper-fab.html">
<style>
body {
font-family: Roboto;
}
core-toolbar {
background-color: #03b7d3;
color: white;
}
.mainFab {
z-index:100;
background-color: #ff5c9d;
/*position: absolute;*/
top: 70px;
right: 16px;*/
}
</style>
</head>
<body fullbleed layout vertical>
<core-header-panel flex>
<core-toolbar class="medium-tall" core-narrow>
<div>Gabriele Musco</div>
<span flex></span>
<paper-fab icon="toc" class="mainFab"></paper-fab>
</core-toolbar>
<!--content goes here-->
</core-header-panel>
</body>
Aucun commentaire:
Enregistrer un commentaire