CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
fightstarr20
fightstarr20

Reputation: 12598

Bootstrap left aligned images affecting text layout

I am using Twitter Bootstrap to build a basic WordPress theme. Everything is working fine apart from when it comes to including images aligned left with some text. My example is below...

<div class="entry-content">
    <div>
        <img class="size-medium wp-image-4587 alignleft" src="https://dummyimage.com/300x200/000000/fff" width="300" height="200">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc magna massa, varius eleifend commodo a, efficitur a magna. Cras egestas porta vehicula. Suspendisse egestas sem in nunc tincidunt venenatis. Proin volutpat vulputate vehicula. Suspendisse odio turpis, imperdiet id dictum sed, laoreet vel eros. Quisque a ultricies erat. Quisque est ante, venenatis sed ligula ac, pulvinar consequat felis. Nulla egestas ut odio at sodales. Etiam in urna arcu.
    </div>

    <div>
        Vivamus blandit rutrum augue, nec sodales ipsum sagittis non. Nam nec mi quis lectus lacinia bibendum. In hac habitasse platea dictumst. Fusce finibus eget nunc at varius. Nam nec dignissim neque, sit amet pretium sem. Quisque eu magna at neque aliquam luctus. Maecenas molestie porta faucibus. Aliquam ac erat consequat, ullamcorper risus eget, lacinia dolor. Nullam tincidunt sit amet mauris et tempus. Duis iaculis dictum nunc nec sollicitudin.
    </div>
</div>

https://jsfiddle.net/DTcHh/25884/

If you make the windows smaller it works fine until it gets really small, then the text starts to space out oddly.

I understand that it is because the individual words are longer than the space available but I can't think of a way to prevent this, anyone have any advice?

Upvotes: 2

Views: 45

Answers (2)

Tom
Tom

Reputation: 2645

Try using the white-space property.

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

body {
    margin: 10px;
}

.alignleft{
  float:left;margin-right:10px;
clear: left;
}
p{
white-space: -moz-pre-wrap !important;
white-space: -webkit-pre-wrap;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
white-space: pre-wrap;
word-wrap: break-word;
white-space: normal;
}
<div class="entry-content">
    <div>
            <img class="size-medium wp-image-4587 alignleft" src="https://dummyimage.com/300x200/000000/fff" width="300" height="200">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc magna massa, varius eleifend commodo a, efficitur a magna. Cras egestas porta vehicula. Suspendisse egestas sem in nunc tincidunt venenatis. Proin volutpat vulputate vehicula. Suspendisse odio turpis, imperdiet id dictum sed, laoreet vel eros. Quisque a ultricies erat. Quisque est ante, venenatis sed ligula ac, pulvinar consequat felis. Nulla egestas ut odio at sodales. Etiam in urna arcu.</p>
    </div>

    <div>
        Vivamus blandit rutrum augue, nec sodales ipsum sagittis non. Nam nec mi quis lectus lacinia bibendum. In hac habitasse platea dictumst. Fusce finibus eget nunc at varius. Nam nec dignissim neque, sit amet pretium sem. Quisque eu magna at neque aliquam luctus. Maecenas molestie porta faucibus. Aliquam ac erat consequat, ullamcorper risus eget, lacinia dolor. Nullam tincidunt sit amet mauris et tempus. Duis iaculis dictum nunc nec sollicitudin.
    </div>
</div>

Upvotes: 1

Mihai T
Mihai T

Reputation: 17687

you could use @media queries so when the screen is too small, the image is not floated and so the text goes below it.

i also added margin:0 auto so the img will be centered but that's only if you want to.

see jsfiddle or code snippet below.

OR you could set a max-width:x px to the image when the screen gets smaller. and leave it floated left see here > max-width

let me know if it helps

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

body {
    margin: 10px;
}

.alignleft{float:left;margin-right:10px;}

@media only screen and (max-width: 460px) {

  .alignleft{float:none;display:block;margin:0 auto;}
	
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="entry-content">
    <div>
            <img class="size-medium wp-image-4587 alignleft" src="https://dummyimage.com/300x200/000000/fff" width="300" height="200">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc magna massa, varius eleifend commodo a, efficitur a magna. Cras egestas porta vehicula. Suspendisse egestas sem in nunc tincidunt venenatis. Proin volutpat vulputate vehicula. Suspendisse odio turpis, imperdiet id dictum sed, laoreet vel eros. Quisque a ultricies erat. Quisque est ante, venenatis sed ligula ac, pulvinar consequat felis. Nulla egestas ut odio at sodales. Etiam in urna arcu.
    </div>

    <div>
        Vivamus blandit rutrum augue, nec sodales ipsum sagittis non. Nam nec mi quis lectus lacinia bibendum. In hac habitasse platea dictumst. Fusce finibus eget nunc at varius. Nam nec dignissim neque, sit amet pretium sem. Quisque eu magna at neque aliquam luctus. Maecenas molestie porta faucibus. Aliquam ac erat consequat, ullamcorper risus eget, lacinia dolor. Nullam tincidunt sit amet mauris et tempus. Duis iaculis dictum nunc nec sollicitudin.
    </div>
</div>

Upvotes: 0

Related Questions