Im Responsive Design werden meine Bilder abgeschnitten und Tabellenabsätze auf der rechten Seite abgeschnitten

Question

Nachdem ich viele Artikel gelesen habe, kann ich keine Antwort darauf finden, warum meine Bilder keinen Rand auf der rechten Seite und meinen Tischabsatz haben Text wird auf der rechten Seite abgeschnitten. Der Absatztext ist auf meinen anderen Seiten in Ordnung, nur in der Tabelle wird er abgeschnitten. Dies ist alles mit css3 Media-Abfragen Responsive Design. Dies ist einer anderen Site passiert, die ich für einen Kunden erstellt habe. Jeder Einblick würde sehr geschätzt werden! Danke! Hier ist meine CSS-Medienabfrage für den Handy-Bildschirm ist:

@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%; 
} 

Und meine HTML für die Seite:

<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> 

Ein kurzer Hinweis, habe ich auf alle meine Seiten das Ansichtsfenster-Meta-Tag gelten Anfangsskala 1.0.

Answer 1

Zunächst einmal: Es gibt keine Medienanfragen im Code Sie auf dem Laufenden ...

Abgesehen davon: Obwohl in der CSS- Sie die Breite für Ihre Tabellen als 100% definieren, haben Sie Inline-Einstellungen dass die Entwürfe 550px Breite:

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

ich nehme an, das ist der Grund für sie nicht passend auf einem Handy-Display. Lösche alle Inline-Sachen, die das CSS stören.

Ähnlich mit Bildern ...