レスポンシブルデザインでは、画像がカットされ、テーブルの段落が右端で切り取られます

Question

多くの記事を読んだ後に、画像の右側に余白がなく、テーブル段落に余白がないテキストは右側で切り取られます。段落のテキストは、他のページでもうまくいきます。段落のテキストは切り捨てられます。 これはすべて、css3メディアクエリレスポンシブデザインを使用しています。これは私がクライアントのために構築した別のサイトに起こりました。どんな洞察力も大いにありがとう！ ありがとう！ここで は、携帯電話の画面のための私のCSSメディアクエリです：

@charset "utf-8"; 
@import url("phone.css") only screen and (max-width:320px); 
container { 
width: 100%; 
height: 100%; 
} 
#header img { 
    position: relative; 
    height: auto; 
    width: auto; 
    max-height:100%; 
    max-width:100%; 
    min-height:100%; 
    min-width:100%; 
    overflow:hidden; 
} 
#navigation { 
    font-size:large; 
    height: auto; 
    width:100%; 
    float:none; 
    overflow:hidden; 


} 
#menu { 
    float:none; 
    margin:0px; 
    display:none; 
    width:100%; 
    position:relative; 
    list-style-type:none; 
} 
.nav-btn { 
    width:100%; 
    background-color:#09F; 
    text-align:center; 
    box-sizing:border-box; 
    padding:15px 10px; 
    font-weight:bold; 
    font-size:large; 
    text-align:center; 
    cursor:pointer; 
    display:block; 
    height:100%; 
} 
.nav-btn:after { 
    content:url(images/mobilemenu.png); 

} 
#menu li { 
     width:100%; 
     font-size:large; 
     font-weight:bold; 
     background-color:#09F; 
     display:block; 
     margin:0px; 
     border:#000 medium solid; 
     float:none; 
     overflow:hidden; 
     text-align:center; 
} 

#menu img { 
    margin:0px; 
    padding:0px; 
    width:90px; 
    height:90px; 
    position:relative; 

} 

#navigation ul li { 
    margin:0px; 
    width:100%; 
    position:relative; 
    float:none; 
    overflow:hidden; 

} 

#menu li a { 
    width:100%; 
    display:block; 

} 

#content { 
    width:100%; 
    height:100%; 

} 


.socialmedia { 
    width:30px; 
    height:30px; 
    max-width:30px; 
    max-height:30px; 

} 




.bigfoot { 
    width:50px; 
    height:50px; 
    max-width:200px; 
    max-height:200px; 
} 




#content img { 

    height:auto; 
    width:100%; 
    position:relative; 
    overflow:hidden; 
    margin:5px; 
} 

#content table, tbody, th, td, tr { 
    display:block; 



} 
#content table { 
    border-collapse: collapse; 
    width: 100%; 
    height: auto; 
    padding: 10px; 
    position: relative; 
    min-width:320px; 
} 

#content td p { 
    position: relative; 
    margin: auto; 
    text-align: center; 
    padding: 5px; 
    min-width: 100%; 
    min-height: 100%; 



} 


#content tr { 
    position:relative; 
    width:100%; 
    height:auto; 
    overflow:hidden; 
} 

#content td { 
    position:relative; 
    width:100%; 
    height:auto; 
    min-width:100%; 
    min-height:100%; 
    overflow:hidden; 
} 


#content tr td img { 
    width:100%; 
    height:auto; 
    max-height:250px; 
    max-width:250px; 

} 



#footer { 
    width:100%; 
    height:100%; 
} 

とページのための私のhtml：

<div style="background-image:url(images/beer%20content%20background2.jpg)" id="content"> 

    <h1 align="center">Our Beers</h1> 
    <p> 

    <table class="beers" align="center" width="550" border="0" cellspacing="5" cellpadding="5"> 
    <tr> 
    <td> 
    <img src="images/Alberts_Web.png" alt="albert's ale" width="350"/> 
    <p>Albert's Ale is a German inspired beer with a crisp malt base, and 2 varieties of hops. This pale ale is hoppy, and a real refreshing thirst quencher. Enjoy year round! <br />6% Alcohol.</p> 
    </td> 
    <td> 
    <img src="images/Hieroglyph_Web.png" alt="Hieroglyph"width="350"/> 
    <p> Hieroglyph is a double IPA. 8% Alcohol.</p> 
    </td> 
    </tr> 
    <tr> 
    <td> 
    <img src="images/Trapezeious_Web.png" alt="Trapezious" width="350"/> 

    </td> 
    <td> 
    <img src="images/Sifu_Web.png" alt="Sifu" width="350"/> 

    </td> 
    </tr> 

</table> 
<h2 align="center">Occasional & Seasonal brews</h2> 
    <table class="beers" align="center" width="550" border="0" cellspacing="5" cellpadding="5"> 
    <tr> 
    <td> 
    <img src="images/Krock'd_Web.png" alt="Krock'd" width="350"/> 

    </td> 
    <td> 
    <img src="images/Viking_Web.png" alt="I Wish I was a Viking" width="350"/> 
    </td> 
    </tr> 
    <tr> 
    <td> 
    <img src="images/Fat Bobby_Web.png" alt="Fat Bobby" width="350"/> 

    </td> 
    <td>&nbsp;</td> 
    </tr> 
</table> 



    </p> 

    <br /> 
    <p align="center">Check out our upcoming events where we will be sampling our beer!</p> 
    <p align="center">Cheers!</p> 
</div> 
<!-- InstanceEndEditable --> 

</div> 
</body> 
<!-- InstanceEnd --></html> 

簡単なメモ、私はに私のすべてのページにビューポートのメタタグを適用しました初期スケール1.0。それとは別に何のメディアクエリを使用すると、投稿のコードではありません...

：

Answer 1

まず第一に、あなたが100％としてあなたのテーブルの幅を定義するCSSでが、あなたはインライン設定を持っていますテーブルを与える幅550px width：

<table class="beers" align="center" width="550" border="0" cellspacing="5" cellpadding="5"> 

私はそれがモバイル画面にフィットしない理由だと思います。 CSSに干渉するそのインラインのものをすべて消去してください。

画像と同じように...