I have an image and some text in a bordered box. The site is Responsive, so the width of the box varies over a pretty wide range.
The site is built with Twitter Bootstrap, which handles all the responsive features very well. But this text wrapping problem has me stumped. I look at the rules with Firebug, but can not figure out why the min-width doesn’t work? Any help or ideas are appreciated…
A page with this problem is live here: http://easydigging.com/Garden_Tool/hoeing_weeding.html
Near the bottom of page are two article excerpts, each with a picture. They are in boxes with green borders and radiused corners. Remember that the site is responsive - the boxes will be different widths on different devices. The easist way to see the problem is to use a desktop monitor and pull the screen width down from wide to narrow. (In tablet width range and in small phone width range, there is no float:left on the image - there just isn’t enough room for it)
Here is the HTML for the articles:
<!-- Articles with photos -->
<div class="container-fluid" style=margin-top:10px; >
<div class="row-fluid">
<div class="span12">
<div class="row-fluid">
<!-- first column -->
<div class="span6" >
<div class="articles-1" >
<img src="../images-new/chillington.jpg" alt="fork hoe article image" />
<p style="min-width:250px;" ><em>
"Built like a large hoe with flat tines instead of a single blade,
the cultivating fork works like a muscle-powered rototiller. With
this tool in hand, I can quickly plow through the soil, dislodging
weeds, breaking up compacted surface soil, loosening, mixing, and
generally getting a bed ready for planting."</em>
</p>
<p>*excerpt from the article
<a href="http://www.finegardening.com/how-to/articles/essential-tools-working-soil.aspx" target="_blank" >
Essential Tools for Working the Soil</a>
by Joe Queirolo in <u>Fine Gardening</u> magazine.
</p>
</div>
</div><!-- end of first column -->
<!-- second column -->
<div class="span6" >
<div class="visible-phone"><p> </p></div>
<div class="articles-1" >
<img src="../images-new/pointed-grass.jpg" alt="Pointed or Ridging Hoe" >
<p style="min-width:250px;" ><em>
"For really tough jobs such as breaking up soil for a new bed,
Easy Digging offers a pointed or ridging hoe made by Bellotto
that has a beefy, two-pound, eight inch, triangular, forged steel
blade that digs through rocks and gravel as well as soil. It is
also terrific for mounding soil around potatoes."</em>
</p>
<p>*excerpt from the article
<a href="http://www.ahs.org/publications/the_american_gardener/pdf/09/09/Green_Garage_48-49.pdf" target="_blank" >
Selecting the Right Hoe</a>
by Rita Pelczaro in <u>The American Gardener</u> magazine.
</p>
</div>
</div><!-- end of second column -->
</div>
</div>
<p> </p>
</div>
</div>
And here is the CSS that pertains:
.articles-1 {
padding: 15px;
border: solid 2px;
border-radius: 15px;
-moz-border-radius: 15px;
border-color: #C9D77B;
}
/* Large desktop */
@media (min-width: 1200px) {
.articles-1 { min-height: 280px; }
.articles-1 img { float: left; height: 280px; margin-right: 10px; margin-bottom: 10px; } }
/* Normal desktop */
@media (min-width: 980px) and (max-width: 1199px) {
.articles-1 { min-height: 260px; }
.articles-1 img { float: left; height: 260px; margin-right: 10px; margin-bottom: 10px; } }
/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) {
.articles-1 { min-height: 220px; }
.articles-1 img { height: 220px; margin-right: 10px; margin-bottom: 10px; } }
/* Landscape phone to portrait tablet */
@media (min-width: 481px) and (max-width: 767px) {
.articles-1 { min-height: 280px; }
.articles-1 img { float: left; height: 260px; margin-right: 10px; margin-bottom: 10px; } }
/* Landscape phones and down */
@media (max-width: 480px) {
.articles-1 { min-height: 280px; }
.articles-1 img { height: 280px; margin-right: 10px; margin-bottom: 10px; } }
The images are square, so I set the min-width of the first paragraph in each article just a little narrower than the photo width. That should make it easier to notice that the first paragraph often gets quite skinny right before the screen width narrows enough to trigger the next CSS media rule. Let me know if I need to post any other info…