We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 32025
    • 305 Posts
    My template uses floating images with text wrap. The images float right the text floats left but wraps around images. The problem is my website is responsive, so when you shrink the template window simulating a tablet, it looks very sloppy in that the text does not break to a new line at a certain point.

    Here is an example page showing my issue: http://www.skyward.e-kahuna.com/business/vehicle-systems/uas.html

    In this example the page looks great in tablet, desktops or even cell phones. However if you shrink the window the text in many tablets looks very sloppy and breaks in bad places.

    What I am really looking for is:
    1. The text does not go in the right hand column if there is an image on the right (it always stays in the left column if there is an image to the right).
    2. When the text starts to get too small due to screen size(say 300px min) the text drops to its own line (no floating next to the image any more). This right now is my biggest problem in that in some cases just a word or two show which looks bad.

    Right now with text wrap and floating images, the site is unpredicatable in medium and small sized devices. How can I fix this?

    This question has been answered by treigh. See the first response.

      Making the web a better place on site at a time! Dayton Web Design: http://www.dayton-web-design.com/
    • You can use a media query to un-float the image on smaller devices.

      Or there's this http://codepen.io/InSightGraphics/pen/nFDwa

      This isn't really a MODX issue, Google is your friend. Try this search
      responsive image wrap text line breaks
      [ed. note: sottwell last edited this post 8 years, 4 months ago.]
        Studying MODX in the desert - http://sottwell.com
        Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
        Join the Slack Community - http://modx.org
      • discuss.answer
        • 30585
        • 833 Posts
        To expand on @sottwell's answer, you can use media queries to target specific screen sizes:

        // Remove the float on smaller screens (smartphones -- portrait)
        @media only screen and (max-width : 320px) {
           .img-float {
              float: none;
          }
        }
        // Add the right float on screens larger than 320px (smartphones -- landscape)
        @media only screen and (min-width : 321px) {
          .img-float {
             float: right;
          }
        }
        


        Now, this is just an example , you'll need to adjust your breakpoints based on your use case.
          A MODx Fanatic
          • 32025
          • 305 Posts
          Thank you both. Sottwell I did try Google search first but I was not sure what to search for since its a complex issue. Floating images, responsive, keeping text in one block, etc. Thank you for the direction.

          treigh, My CSS has media querries and I have been using them effectively up till now, just wasn't sure how to use the media querries to solve my problem. Wasn't sure if I should focus on adding definitions to the media queries for the text block or the image or both. Your answer makes sense I appreciate the concept resonse.
            Making the web a better place on site at a time! Dayton Web Design: http://www.dayton-web-design.com/
            • 32025
            • 305 Posts
            The image float with media queries worked great!
              Making the web a better place on site at a time! Dayton Web Design: http://www.dayton-web-design.com/
              • 30585
              • 833 Posts
              Glad it worked for you.
                A MODx Fanatic