Search code examples
csstwitter-bootstrapcss-floatgrid-layout

Making float-right image mobile responsive with bootstrap

I have this image that floats right, with some text around it:

<img class="img-responsive" style="float:right;" src="https://assets.ifttt.com/images/channels/1352860597/icons/on_color_large.png">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

As you can see, I've tried to use the img-responsive class. But despite this, on tiny screens, the image squeezes up the text that is next to it. This looks very messy and I wonder if there's any way to make the image expand to take up the full width on XS devices?

Solution

  • There are a lot of answers :

    With media queries :

    Bootply : http://www.bootply.com/9R942IK2VC

    HTML:

    <div class="container">
  <img class="img-responsive mypic" src="https://assets.ifttt.com/images/channels/1352860597/icons/on_color_large.png">

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

    CSS:

    @media screen and (min-width:769px) {
  .mypic {float:right; 
}

    With duplicated pic :

    Bootply : http://www.bootply.com/dAWJyzJBeQ#

    HTML

    <div class="container">
  <img class="img-responsive hidden-xs" style="float:right;" src="https://assets.ifttt.com/images/channels/1352860597/icons/on_color_large.png">
  <img class="img-responsive visible-xs" src="https://assets.ifttt.com/images/channels/1352860597/icons/on_color_large.png">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

    With Bootstrap Grid System See ZimSystem answer