Problemen met afbeeldingen

Hallo, Ik heb sinds een tijdje voor mijn blog een nieuwe lay out en ben tegen een probleem aangelopen met de afbeeldingen van de posts. Met de originele template zien de afbeeldingen er overal goed uit (computer, iphone) behalve als ik op mijn surface op de read more knop klikt wordt de afbeelding in één keer even breed als de hele container (1030px)

Om dit op te lossen heb ik in de code .post-entry img {max-width:100% de 100% veranderd in 680px. Echter geeft dit het probleem dat op mijn iphone de afbeeldingen na de read more knop te groot zijn en afgesneden worden. Wie kan mij helpen dit op te lossen zodat het overal na de read more knop goed te zien is?

/*** Post image ***/
.post-image {
margin-bottom:18px;
}
.post-image img {
max-width:100%;
height:auto;
}

.post-image.audio iframe {
height:166px;
}

.container.sp_sidebar .post-image.audio iframe {
width:650px;



height:auto;
}

/*** Post Entry ***/
.post-entry {

}

.post-entry img {
max-width:100%; --> deze staat nu ingesteld op 680px zodat mijn surface de afbeeldingen niet 1030px maakt na read more

height:auto;
}

.post-entry p {
margin-bottom:20px;

}


Dit is de mobile portrait die er nu instaat en met 680px in de vorige code worden de afbeeldingen dus te groot weergeven op iphone

/*************************************************
* Mobile Portrait *
*************************************************/

@media only screen and (max-width: 320px) {

.container {
width:320px;
}

#navigation-wrapper {
display:none;
}

.slicknav_menu {
display:block;
}

#logo img {
max-width:200px;
height:auto;
}

.post-header h1 a, .post-header h2 a, .post-header h1 {
font-size:22px;
letter-spacing:2px;
}

.post-image img {
width:320px;
height:auto;
}

.post-image.audio iframe {
width:320px;
height:auto;
}

.item-related {
width:320px;
margin-bottom:30px;
}

.share-box {
width:46px;
height:36px;
line-height:36px;
margin:0 4px;
}

.post-pagination .prev-post {
width:320px;
}
.post-pagination .next-post {
width:320px;
}

#respond textarea {
width:90%;
}

.thecomment .author-img {
display:none;
}

#widget-area .widget, #sidebar .widget {
width:320px;
margin-right:32px;
float:left;
margin-bottom:35px;
}

#footer-logo img {
max-width:320px;
height:auto;
}

#footer-social a i {
height:28px;
width:28px;
line-height:28px;
margin-right:0;
font-size:12px;
}
#footer-social a {
margin:0 5px;
}
#footer-social a span{
display:none;
}

.wpcf7 textarea {
width:94%;
}

.sp-grid li {
width:320px;
}
.sp-grid li:nth-child(3n+3) {
margin-right:0;
}
.sp-grid li:nth-child(2n+2) {
margin-right:0;
}

.container.sp_sidebar #main {
width:320px;
margin-right:0;
}
.container.sp_sidebar #sidebar {
width:320px;
}

.container.sp_sidebar #sidebar .widget {
width:258px;
}

.container.sp_sidebar .item-related {
width:320px;
margin-bottom:30px;
}


}

Kan je even een JSFiddle maken, of online plaatsen (demo) wat je al hebt ?

Da's veel gemakkelijker voor de vrijwilligers die je wensen te helpen.

Ik ben een leek dus JSFiddle zegt me niks, de link is www.mixtfashion.com Als jullie daar meer mee kunnen?