0

https://gdg-test-ch.firebaseapp.com/

3 枚のカードが並んでいますが、右側に空きスペースがあります。モバイル ビューでは、スペースが大きくなります。また、ツールバーやナビゲーション バーもブラウザに適合しています。

どうすればレスポンシブにできますか？

Card-view.html (カード要素)

<link rel="import" href="../bower_components/polymer/polymer.html">
  <link rel="import" href="../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
  <link rel="import" href="../bower_components/paper-button/paper-button.html">
  <link rel="import" href="../bower_components/paper-card/paper-card.html">
  <link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html" />




  <dom-module id="card-view">


    <template>

      <style include="iron-flex iron-flex-layout">
        /* local styles go here */
        :host {
          display: block;
          max-width: 1450px;
        }
        .card {
          width: 300px;
          margin-left: 5px;
          margin-right: 5px;
          margin-bottom: 5px;
          margin-top: 5px;
        }
      </style>

      <!-- local DOM goes here -->
      <div class="container flex layout horizontal wrap">

<template is="dom-repeat" items="{{list}}">
        <div class="card">
          <paper-card heading="{{item.first}}" image="../image/{{item.last}}.jpg">

            <div class="card-actions">
                <paper-button>Explore!</paper-button>
              <paper-icon-button src="https://assets-cdn.github.com/images/modules/logos_page/Octocat.png"
               alt="octocat" title="octocat"></paper-icon-button>

            </div>
          </paper-card>
        </div>

</template>

      </div>
    </template>

    <script>
      Polymer({
        is: 'card-view',
        ready: function() {
            this.list = [
                {first: 'Bob', last: 'i'},
                {first: 'Sally', last: 'j'},
                {first: 'Sally', last: 'j'},
                {first: 'Sally', last: 'j'},
                {first: 'Sally', last: 'j'},
                {first: 'Sally', last: 'j'},
                {first: 'Sally', last: 'j'},
                {first: 'Sally', last: 'j'}


            ];
          }
      });
    </script>

  </dom-module>

Index.html (メイン ページ)

<!DOCTYPE html>
<html>
<head>
  <script src="bower_components/webcomponentsjs/webcomponents.js"></script>
  <link rel="import" href="elements/card-view.html" />
  <link rel="import" href="bower_components/paper-toolbar/paper-toolbar.html" />

</head>




 <body>
<style>
a,.anchor-like,
.markdown-html a{
  color: var(--default-primary-color);
  text-decoration:none;
}
body {
  background-color: #FF5722;
}
</style>
<paper-toolbar>
  <span class="title">Title</span>
</paper-toolbar>
<card-view></card-view>






</body>

</html>
4

1 に答える 1