CSS issue involving: floating images, text wrap and responsive design.

305 Posts

Dayton Web Design Reply #1, 8 years, 3 months ago

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/

☆ A M B ☆
24,524 Posts

sottwell Reply #2, 8 years, 3 months ago

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, 3 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

833 Posts

treigh Reply #3, 8 years, 3 months ago

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

305 Posts

Dayton Web Design Reply #4, 8 years, 3 months ago

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/

305 Posts

Dayton Web Design Reply #5, 8 years, 3 months ago

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/

833 Posts

treigh Reply #6, 8 years, 3 months ago

Glad it worked for you.

A MODx Fanatic

Answered CSS issue involving: floating images, text wrap and responsive design.