このイメージ行をCSSで反応させるにはどうすればいいですか？

Question

this websiteの下部にはロゴの列があります。あなたがブラウザウィンドウのサイズを変更しない限り、デスクトップブラウザでは完璧に見えます。モバイルで見たときには、まったく反応しません。ここで

は、ロゴの行のHTMLコードです：

/* Client Logos */ 
.images { 
display: inline; 
margin: 5px; 
padding: 0px; 
vertical-align:middle; 
height:85px; 
} 

.imagessmaller { 
display: inline; 
margin: 10px; 
padding: 0px; 
vertical-align:middle; 
height:55px; 
} 

.imagessmallerv2 { 
display: inline; 
margin: 10px; 
padding: 0px; 
vertical-align:middle; 
height:35px; 
} 

#clientlogosrow { 
display: block; 
margin: 0px; 
padding: 0px; 
position: relative; 
top: 7px; 
height: auto; 
overflow-y: hidden; 
overflow-x:auto; 
word-wrap:normal; 
white-space:nowrap; 
} 

あなたは（別のクラスの画像のいくつかに気づくでしょう：

<!-- 1st row of logos --> 
     <div id="clientlogosrow"> 
     <img src="images/logo-answerables.png" class="imagessmaller" /></a> 
     <img src="images/logo-mfs.png" class="images" /></a> 
     <img src="images/logo-wolf.png" class="images" /> 
     <img src="images/logo-JA.png" class="imagessmallerv2" /> 
     <img src="images/logo-JOC.png" class="imagessmallerv2" /> 
    </div> 

<!-- 2nd row of logos --> 
     <div id="clientlogosrow"> 
     <img src="images/logo-icl.png" class="imagessmaller" /> 
     <img src="images/logo-pm.png" class="imagessmaller" /> 
     <img src="images/logo-TD.png" class="imagessmaller" /> 
     <img src="images/logo-kl.png" class="imagessmaller" /> 
     <img src="images/logo-mmt.png" class="imagessmaller" /> 
     </div> 

ここCSSです"images"、 "imagesmsallerv2"）、これは、CSSでの自動サイズ変更の試みが実際に不均衡なロゴサイズになったために行いました。私はこれが間違ったやり方ではないと推測していますので、応答性のあるロゴの行をレイアウトするさらに簡単な方法があれば教えてください！

Answer 1

に遭遇するまで、テキストは同じ行に を続けています。この例を見て、あなたのロゴタイプをホットリンクしました。フルサイズで開き、ブラウザのサイズを変更しようとします。希望していることを願っています。小さな画面でもロゴタイプのサイズを調整することができます。今はサイトからすべてのサイズを保存しています。

body { 
 
    background-color: darkgrey; /* Just to be able to see white logotypes */ 
 
} 
 

 
.logotypes { 
 
    max-width: 700px; 
 
    margin: 0 auto; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    align-items: center; 
 
    justify-content: center; 
 
} 
 

 
.logotypes img { 
 
    margin-right: 10px; 
 
    margin-bottom: 10px; 
 
    width: auto; 
 
    max-width: 230px; 
 
    max-height: 85px; 
 
}

<div id="clientlogosrow" class="logotypes"> 
 
    <img src="https://twotailsmedia.com/images/logo-answerables.png" class="imagessmaller"> 
 
    <img src="https://twotailsmedia.com/images/logo-mfs.png" class="images"> 
 
    <img src="https://twotailsmedia.com/images/logo-wolf.png" class="images"> 
 
    <img src="https://twotailsmedia.com/images/logo-JA.png" class="imagessmallerv2"> 
 
    <img src="https://twotailsmedia.com/images/logo-JOC.png" class="imagessmallerv2"> 
 

 
    <img src="https://twotailsmedia.com/images/logo-icl.png" class="imagessmaller"> 
 
    <img src="https://twotailsmedia.com/images/logo-pm.png" class="imagessmaller"> 
 
    <img src="https://twotailsmedia.com/images/logo-TD.png" class="imagessmaller"> 
 
    <img src="https://twotailsmedia.com/images/logo-kl.png" class="imagessmaller"> 
 
    <img src="https://twotailsmedia.com/images/logo-mmt.png" class="imagessmaller"> 
 
</div>

Answer 2

ルールからwhite-space: nowrap;を削除して、改ざんを許可するようにしてください。

nowrap空白のシーケンスが1つの空白に崩壊します。テキストは決して次の行に折り返されません。
タグはあなたがフレキシボックスのレイアウトを使用して、あなたの目標は、より簡単に達成することができ

https://www.w3schools.com/cssref/pr_text_white-space.asp