Оптимизация для мобильных устройств не отображается правильно

Question

Я пытаюсь (и не удается) сделать мой сайт хорошо выглядящим на мобильных устройствах, и он выглядит просто неправильно. Изображение показано справа, но поле с текстом - это просто тонкая полоска. Проверьте изображение, коробка должна обернуться вокруг изображения, а текст будет таким же широким, как и изображение.

http://cdn1.cdnme.se/886420/6-3/problem_51612adfddf2b3563ed16d2f.jpg

Я новичок в этом и не знаю, что я делаю, но я стараюсь, чтобы узнать, не сумев, на этот раз, хотя он чувствует себя невозможно. Есть ли что-то, что я сделал неправильно? Что-то не хватает? Это не единственное, что нужно сделать, чтобы заставить его работать? кода для запросов СМИ, которые я использую выглядит следующим образом:

/* Smartphones (portrait and landscape) ----------- */ 
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) { 
/* Styles */ 
#wrapper { 
width: 100%; 
} 
#container { 
width:100%; 
margin: auto; 
} 
    #content { 
width: 100%; 
float: right; 
} 
#post { 
width: 100%; 
} 
#post img { 
    max-width: 100%; 
    margin: 0px 5px 20px 0px; 
float: left; 
border-radius: 5px 5px 0px 0px; 
-webkit-box-shadow: 0px 3px 5px#000000; 
-moz-box-shadow: 0px 3px 5px#000000; 
box-shadow: 0px 3px 5px#000000; 
} 
} 

/* Smartphones (landscape) ----------- */ 
@media only screen 
and (min-width : 321px) { 
/* Styles */ 
#wrapper { 
width: 100%; 
} 
#container { 
width:100%; 
margin: auto; 
} 
    #content { 
width: 100%; 
float: right; 
} 
#post { 
width: 100%; 
} 
#post img { 
    max-width: 100%; 
    margin: 0px 5px 20px 0px; 
float: left; 
border-radius: 5px 5px 0px 0px; 
-webkit-box-shadow: 0px 3px 5px#000000; 
-moz-box-shadow: 0px 3px 5px#000000; 
box-shadow: 0px 3px 5px#000000; 
} 
} 

/* Smartphones (portrait) ----------- */ 
@media only screen 
and (max-width : 320px) { 
/* Styles */ 
#wrapper { 
width: 100%; 
} 
#container { 
width:100%; 
margin: auto; 
} 
    #content { 
width: 100%; 
float: right; 
} 
#post { 
width: 100%; 
} 
#post img { 
    max-width: 100%; 
    margin: 0px 5px 20px 0px; 
float: left; 
border-radius: 5px 5px 0px 0px; 
-webkit-box-shadow: 0px 3px 5px#000000; 
-moz-box-shadow: 0px 3px 5px#000000; 
box-shadow: 0px 3px 5px#000000; 
} 
} 

Answer 1

Попробуйте использовать clear свойства, где элементы всплывает, потому что текст-бокс предполагает всплывать вместе с изображением или содержанием протекающего его.

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

#content { 
width: 100%; 
float: right; 
clear:both; /*Important*/ 
} 

#post img { 
max-width: 100%; 
margin: 0px 5px 20px 0px; 
float: left; 
clear:both; /*Important*/ 
border-radius: 5px 5px 0px 0px; 
-webkit-box-shadow: 0px 3px 5px#000000; 
-moz-box-shadow: 0px 3px 5px#000000; 
box-shadow: 0px 3px 5px#000000; 
} 
}