SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Zealot
    Join Date
    Oct 2012
    Posts
    137
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    How to set min width of text wrapped around an image? min-width not working

    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:
    HTML Code:
    <!-- 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> &nbsp; </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> &nbsp; </p>
    </div>
    </div>
    And here is the CSS that pertains:
    Code:
    .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...

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,207
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Greg Baka View Post
    can not figure out why the min-width doesn't work?
    It does indeed work. It stops squeezing down once it gets to a width of 250px. The real question is, what behavior do you actually want? I don't think min-width is what you are looking for here.

    I'm guessing that at a certain width, you want the <p> to sit under the image? It's probably best to look at media queries for this. Anyhow, please first describe what you do want to see.

  3. #3
    SitePoint Zealot
    Join Date
    Oct 2012
    Posts
    137
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Ralph asked:
    I'm guessing that at a certain width, you want the <p> to sit under the image? It's probably best to look at media queries for this. Anyhow, please first describe what you do want to see.
    I want there to be a REASONABLE amount of text to the side of the image. Once it starts getting unreasonable, then I want ALL the text to move under the image. As an example, the following would be OK: (switching to text on the left and image on the right to make the typing easier...)

    The red pig was obstinate
    about what types of food
    he would devour. He did
    not like truffles or tuna
    fish.
    The following would not be good (and this is what I am seeing happen, at least on Firefox..._

    The
    red
    pig
    was
    obstinate about what types of food he would devour. He did not
    like truffles or tuna fish.
    What would be perfect would be able to specify that each line of text next to the image have at least 20 characters in it, and when that can no longer happen then all the text goes under the image. Since that's not possible, I was assuming that I had to specify a minimum paragraph width in pixels? What I am afraid is happening is that as soon as there is at least one line of text under the image, the paragraph width becomes equal to the width of the bordered box

    Ralph said:
    It does indeed work. It stops squeezing down once it gets to a width of 250px.
    Really? I don't see that using Firefox. In any screen width, the image is always around 270px and I see the text to the right get squeezes down to around 180px.

    I'm going to try to attach an image of a screenshot showing the width narrowed down until just before it switches to the smallest phone CSS settings...

    narrowshot1.jpg

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,207
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Once the <p> hits the min width, I see this in all my browsers:

    dig.jpg

    Is that what you want?

  5. #5
    SitePoint Zealot
    Join Date
    Oct 2012
    Posts
    137
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Hi Ralph,

    I guess we are having a mis-communication

    How do you measure the <p> to know that it is 250px or more wide?

    As an experiment, I opened the page in a different browser (Chrome) and temporarily added the the rule float:left; to the image for the smallest screen width: (you won't be able to replicate this extreme case because I removed the float immediately after getting the screen shot)

    Code:
    /* Landscape phones and down */
       @media (max-width: 480px) { 
         .articles-1 { min-height: 280px; }
         .articles-1 img { float: left; height: 280px; margin-right: 10px; margin-bottom: 10px; }
    And that lets text stay to the right of the image until it stacks up to say like this:

    "Built
    like a
    large
    hoe
    with
    flat
    tines
    which I'm pretty sure is not 250px wide

    Here's a picture of it: narrowshot2.jpg

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,207
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Ah sorry, I didn't actually measure the width of the <p> when it was falling. The reason it suddenly drops is because the float is removed from the image at that point, so the <p> is forced to sit underneath.

  7. #7
    SitePoint Zealot
    Join Date
    Oct 2012
    Posts
    137
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Whew! Glad we cleared that up

    I was starting to think maybe my computer was malfunctioning.

    So any ideas on how to fix the very skinny text stack problem?

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,207
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    In my browsers you have solved it, by removing the float on the image once the container gets to a certain width. In what browser are you getting that skinny text?

  9. #9
    SitePoint Zealot
    Join Date
    Oct 2012
    Posts
    137
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Oh, I didn't explain that well enough... I need to know how to fix it in a general sense. The example page I linked to works well enough because I spent too much time setting image widths and even re-writing the text to work reasonably well in this one case.

    Now I am working on a different page that has a similar "image+text in a box" and I don't want to have to tweak every single page that has a "image+text in a box".

    That's why I want to know how to keep the text from doing silly things like having just one word per line next to the image...

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,207
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    The advantage of CSS is that you create a style that applies to the same situation on any page. Currently, you have a rule that any image in a box with class "article-1" will be floated at certain screen widths and not floated at others—no matter what page it appears on. E.g.

    Code:
    @media (max-width: 1199px) and (min-width: 980px)
    .articles-1 img {
    float: left;
    height: 260px;
    margin-right: 10px;
    margin-bottom: 10px;
    }
    So the trick is to wrap any image you want to behave like this in a div with class="article-1". If that's not a very intuaitive class name, or if there are other styles on article-1 that you don't want to apply in all situations, then choose a class specifically for this behavior, such as "img":

    Code:
    <div class="articles-1 img">
        <img src="../images-new/chillington.jpg" alt="fork hoe article image">
    </div>
    Code:
    @media (max-width: 1199px) and (min-width: 980px)
    .img img {
    float: left;
    }

  11. #11
    SitePoint Zealot
    Join Date
    Oct 2012
    Posts
    137
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I agree that will work. Actually I already created classes article-1, article-2, and article-3 trying to do it this way for different pages. But it seems to be a never ending cycle. I really don't want to still be doing it all the way up to article-49

    I found this article that seems to have a cool solution to exactly this problem:
    http://css-tricks.com/minimum-paragraph-widths/

    but I don't understand how the psuedo element works, and how to have it show up only in the "image+text in boxes" I create. Does the linked article make any sense to anybody that can translate it into how I would use it in my case?

  12. #12
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,207
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Unless you have flueid images, you don't need that solution anyway.

    I really don't want to still be doing it all the way up to article-49
    The idea is that you use the articles-1 class on every page, not create a different class for every page.

    Or instead, as I mentioned, create a special class just for boxes that contain an image that will need to behave like this, such as the .img class I mentioned above.

  13. #13
    SitePoint Zealot
    Join Date
    Oct 2012
    Posts
    137
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Let's agree to just give the name Method 1 to the idea of avoiding the problem by using CSS media queries to turn the float on and off.
    - It's the method I've been using and it's the method that Ralph has mentioned above. It works well if you can keep your box width and image width combination in a narrow range. But when that combination changes much, then you need a new set of media queries to keep things looking nice. It is sort of a brute force method and requires that you really pay attention to your widths and CSS.

    So let's ignore Method 1 and try something new.

    What we REALLY want is a new Method 2
    - This would be a method that does not require paying much attention to your image widths and your box widths. And that means it works better for responsive design where it is nicer to just let the image width be some percentage of the box width.

    I'm working on adapting the idea from the article mentioned above and will post it soon...


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •