レスポンシブルリアクションアプリ（CSS経由）

Question

今のところ、私のアプリは大画面でどのようにしたいのかをほぼ正確に見ています。 https://imgur.com/a/MCe5D - 画面サイズを縮小すると、2つの列（トレンドアップとトレンドダウン）がちょうど接近するまで接近します。しかし、彼らがもう近づくことがなくなったその時点で、私はTrending Downを持っていきたいと思います。 Here's a pen showing the area that is being affected.

//The whole area surrounding the two columns 
.playersColumns { 
display: flex; 
flex-direction: row; 
justify-content: space-evenly; 
padding-left: 150px; 
padding-right: 150px; 
padding-top: 25px; 
overflow-y: scroll; 
} 

//The two columns of player info 
.playersBody { 
overflow: auto; 
flex-direction: column; 
justify-content: center; 
flex-wrap: wrap; 
min-width: 255px; 
} 

ペンは非常に有用ではありませんが、それは私の正確なコードを示しており、どのタグがどこであることを。私はプレーヤーの情報とトレンドヘッダーの2番目の列を最初のものの中に入れようとしましたが、それは1つの大きな列（これは私が望むものですが、画面が縮小されているときのみ）にしました

助けていただければ幸いです。コードやレイアウトを表示する方法があれば、教えてください。

Answer 1

メディアクエリを調べることをおすすめします。 Hereは、基本を示す短いビデオです。

これらの条件で別々のスタイルをトリガーするしきい値を設定できます。 UIが異なるサイズで何か異なることをしたいときに非常に便利です。

@media only screen 
and (*Your threshold criteria goes here* EXAMPLE: max-width : 1000px) { 
    //css goes here with whatever css you want to fire at this threshold 
}