デバイスの幅が小さい場合、htmlテーブルを変更します。px

1行にあるテーブルに両側のロゴとその間のAbout Usのテキストが表示されます。これは、ワイドスクリーンデバイスには最適ですが、小さな画面デバイスで圧縮されて見えます。どうやってロゴを小さな画面のデバイスのテキストの下（2行目）に配置し、ワイドスクリーンのために同じようにすることができますか？デバイスの幅が小さい場合、htmlテーブルを変更します。px

/*For logos*/ 
 
.popit { 
 
    text-align: center; 
 
    padding-bottom: 60px; 
 
} 
 

 
@media screen and (min-width: 320px) { 
 
    .popit { 
 
    height: 57px; 
 
    width: 180px; 
 
    } 
 
} 
 

 
@media screen and (min-width: 940px) { 
 
    .popit { 
 
    height: 57px; 
 
    width: 180px; 
 
    
 
    } 
 
} 
 
/*For my Text between logos*/ 
 
.popito { 
 
    color: #333333; 
 
    padding-bottom: 60px; 
 
    text-align: center; 
 
} 
 

 
@media screen and (min-width: 320px) { 
 
    .popito { 
 
    font-size: 30px; 
 
    letter-spacing: 2px; 
 
    font-weight: 800; 
 
    position: relative; 
 
    margin-bottom: 0px; 
 
    text-transform: uppercase; 
 
    } 
 
} 
 

 
@media screen and (min-width: 940px) { 
 
    .popito { 
 
    font-size: 40px; 
 
    letter-spacing: 3.5px; 
 
    text-transform: uppercase; 
 
    } 
 
}

<table style="width: 100%;"> 
 
    <tbody> 
 
    <tr> 
 
     <th class="popit" width="33%"> <img class="alignnone size-full wp-image-1671" src="https://media-cf.assets-cdk.com/teams/repository/export/18f/774a0a28d100584040050568b5709/18f774a0a28d100584040050568b5709.png" alt="" width="180" height="50" /></th> 
 
     <th width="33%"> 
 
     <div class="popito">ABOUT US</div> 
 
     </th> 
 
     <th class="popit" width="33%"><img class="alignnone size-full wp-image-1671" src="https://media-cf.assets-cdk.com/teams/repository/export/18f/774a0a28d100584040050568b5709/18f774a0a28d100584040050568b5709.png" alt="" width="180" height="50" /></th> 
 
    </tr> 
 
    </tbody> 
 
</table>

出典

2017-09-21 Namik

が見W3 https://www.w3schools.com/css/css_rwd_intro.asp – Hash

あなたはこのような何かあなたのHTMLマークアップを作ってみることができます：そして、全体の第二列（smalldeviceに）あなたはそれを隠すことにしたいメディアクエリとdisplay: block;そのためdisplay: none;を与える

<table style="width: 100%;"> 
    <tbody> 
    <tr class="smalldevice"> 
     <th colspan=3> 
     <div class="popito">ABOUT US</div> 
     </th> 
    </tr> 
    <tr> 
     <th class="popit" width="33%"> <img class="alignnone size-full wp-image-1671" src="https://media-cf.assets-cdk.com/teams/repository/export/18f/774a0a28d100584040050568b5709/18f774a0a28d100584040050568b5709.png" alt="" width="180" height="50" /></th> 
     <th width="33%"> 
     <div class="popito">ABOUT US</div> 
     </th> 
     <th class="popit" width="33%"><img class="alignnone size-full wp-image-1671" src="https://media-cf.assets-cdk.com/teams/repository/export/18f/774a0a28d100584040050568b5709/18f774a0a28d100584040050568b5709.png" alt="" width="180" height="50" /></th> 
    </tr> 
    </tbody> 
</table>

出現するはずです。

上の行のdivで同じことをやってください。テストする時間がなかったにもかかわらず、うまくいくはずです。

私はそれは私が何を意味するか理解できる願っています:)

よろしく

出典

2017-09-21 12:10:44 bquarta

これは、あなたのHTMLが応答するブラウザに指示あなたの<head>

<meta name="viewport" content="width=device-width, initial-scale=1">

にこれを追加します。

出典

2017-09-21 11:27:50 AgeDeO

私が追加しましたが、それはまだ同じです。私はそれらを同じ ''に入れているからです。 Meybe私はデバイスがモバイルの場合、HTMLを再構成する必要があります。 – Namik

デバイスの幅が小さい場合、htmlテーブルを変更します。px

答えて

関連する問題