css responsive design: how to improve my page ? - html

Question

I have experience in web development but zero experience in mobile development. I have therefore purchased a website template (html5 +css3) and I then used it as a starting point for a PHP website.
Some of the pages are not working very well on mobile though. When I test this page, the text is not sizing to the mobile screen. Even worse, when I go into Reader mode on iOS, there's just this big image of silver rings showing, instead of the actual text.
How can this be fixed ?
The code responsible for showing a block of text is the following:
<div class="container">
<div class="content_block row">
<div class="fl-container span9">
<div class="row">
<div class="posts-block span12">
<div class="contentarea">
<div class="row-fluid">
<div class="span12 module_cont module_text_area module_medium_padding">
<h3 class="headInModule"></h3>
<p>Les prestations commencent à partir de 250 euros.</p>
<p>Lors de ma prestation, je suis à votre entière disposition pendant un
nombre d’heures qui varie en fonction de la formule choisie. </p>
<p>Je m’engage à délivrer les photos dans un délai de 4 semaines suivant le
mariage.</p>
<p>Les frais de déplacement sont inclus dans la région Alsace-Lorraine,
Luxembourg et Province Luxembourg en Belgique. Pour toute autre région,
veuillez me contacter.</p>
</div>
</div>
<!-- .row-fluid -->
<div class="row-fluid">
<div class="span12 module_cont module_text_area module_medium_padding">
<img src="/img/bronze.jpg" alt="formule bronze"
style="float:left"/>
<div style="float:right">
<h3 class="headInModule">Formule Bronze</h3>
<a id="anchor1"></a>
<ul class="list_type1">
<li>6H de prestation le jour du mariage * (plage horaire à préciser
avec les mariés)
</li>
<li>Rencontre des futurs mariés avant le mariage et signature du
contrat de prestation
</li>
<li>La prestation comprend un photo reportage permettant de couvrir
les thèmes suivants:
<ul>
<li>préparatifs (habillage, maquillage, coiffeur)</li>
<li>cérémonie</li>
<li>photos de couple ou/et de groupe</li>
<li>vin d’honneur</li>
</ul>
</li>
<li>Travail de post-production et de retouches</li>
<li>1 DVD contenant les photos retravaillées en haute résolution
(min. 150 photos)
</li>
<li>Galerie photo internet sécurisée et disponible pendant 1 an
minimum.
</li>
<li>Cession intégrale des droits de reproduction dans un cadre privé
uniquement.
</li>
</ul>
<i>prix sur demande</i>
</div>
</div>
</div>
<!-- .row-fluid -->

Answer 1

Your classes .span9 and .span12 has a width of 700px and 940px which is stretching your content. If you set these to 100% in your media queries it should work.
e.g.
#media only screen and (max-width: 770px){
.span9, .span12 {width:100%;}
}