十分なスペースがある場合、浮動小数点の要素が小さい解像度でブレークするのはなぜですか？

Question

浮動小数点型の要素は、広いビューポートでの表示方法ですが、（1920pxの幅からおよそ1100pxの幅まで）スケールを縮小すると、垂直方向に折れてスタックするだけです。その解像度でまだ浮かべる余裕がありますが、何が問題なのか分かりません。ここで

は私のHTMLです：ここでは

<div id="page-content" class="page homepage"> 
    <div id="homepage-cards"> 

     <div class="homepage-card"> 
      <img src="{{asset("img/content/web_development.png")}}" alt="web development" /> 
      <h2>Web development</h2> 
     </div> 

     <div class="homepage-card"> 
      <img src="{{asset("img/content/web_development.png")}}" alt="web development" /> 
      <h2>Web development</h2> 
     </div> 

     <div class="homepage-card"> 
      <img src="{{asset("img/content/web_development.png")}}" alt="web development" /> 
      <h2>Web development</h2> 
     </div> 

     <div class="homepage-card"> 
      <img src="{{asset("img/content/web_development.png")}}" alt="web development" /> 
      <h2>Web development</h2> 
     </div>   

    </div> 
</div> 

は私LESSです：

div.page.homepage { 
    position: relative; 
    background: @skyscrapers no-repeat center center fixed; 
    .background-size(cover); 
    min-height:1080px; 
    z-index:10; 
} 

div#homepage-cards { 
    display:inline-block; 
    position:absolute; 
    top:40%; 
    left:50%; 
    .translate(-50%, -50%); 

    div.homepage-card { 
     display:inline-block; 
     text-align:center; 
     background-color:#ffffff; 
     padding:56px 60px 100px 60px; 
     float:left; 
     margin-right:30px; 
     margin-bottom:30px; 
     &:nth-child(2n+2) { 
      margin-right:0; 
     } 
     &:nth-child(3) { 
      clear:left; 
     } 
     h2 { 
      margin-top:25px; 
      text-transform: lowercase; 
      font-weight:bold; 
     } 
    } 

} 

これはどのようにそれらのカードは、広いビューポート上で見ている：これは、彼らがどのように見えるかです

少し小さいビューポート（まだ2つの列に留まるのに十分なスペースを持っています）：

親「インラインブロック」要素は、位置が絶対的で、それでもまだ周囲に多くの空きがあるにもかかわらず、ビューポートの幅とともに縮小しているようです。

十分な余裕がなくなるまで、その要素を縮小するにはどうすればよいですか？

Answer 1

（...）はまだありません、そうではない2列

に滞在するのに十分なスペースを持ちながら。 #homepage-cardsをleft: 50%に設定しました。これは基本的に、ビューポート全体の幅の半分になることを意味します。その半分の中には、2つの行のための十分なスペースがありません。

私は、あなたが今使っている翻訳トリックとは異なる方法を見つけることを提案します。または、それがブレークポイントの上/下にあるときにいくつかのメディアクエリを追加することをお勧めします。