Break line after an IMG with CSS

Navigation
2

I am making the mobile version of a website, but I can not force a line break after an image that is inside a modal.

This is the part that matters in the modal: 

<div class="modal-content">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;
        </button>
        <h4 class="modal-title">Açougue</h4>
</div>
<div class="row modal-conteudo">
    <div class="modal-body">

        <p>
            <img class="img-modal" src="view/img/acougue.png" align="left" style="margin-right: 10px;">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer efficitur justo tellus, rutrum lobortis nibh placerat ut. Etiam magna lorem, imperdiet sit amet felis nec, dictum eleifend felis. Donec vel molestie dui. Maecenas nulla eros, porta id nulla eu, imperdiet ullamcorper purus. Pellentesque commodo, massa vitae bibendum eleifend, libero turpis dapibus elit, eu auctor nisl dui rhoncus nibh. Nam vulputate sem nisi, non eleifend justo fringilla sed. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur tincidunt lectus nisl, quis semper sem fermentum sed. Nulla a mi vehicula, sagittis nulla ac, venenatis erat. Maecenas tristique nibh eget dignissim malesuada.
    </p>
  </div>
</div>

Basically I need that after the tag <img> css breaks the line, but I can not use <br> because in the desktop line will not break, only when the media query is @media(max-width: 1080px)

    
asked by anonymous 14.05.2018 / 16:03

3 answers

1

I made using flex and changing the order from row to column , so one item remains per column. Then I used align-self to center the image.

See the result. (you need to test on a smaller screen than the Snippet here of StackOverflow ok) 

    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />

<style>
    @media only screen and (max-width: 1080px) {
        p {
            display: flex;
            flex-direction: column;
        }
        }
        img {
            width: 200px;
            align-self: center;
        }
    }
</style>

    
    
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;
            </button>
            <h4 class="modal-title">Açougue</h4>
    </div>
    <div class="row modal-conteudo">
        <div class="modal-body">

            <p>
                <img class="img-modal" src="http://placecage.com/200/200"align="left" style="margin-right: 10px;">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer efficitur justo tellus, rutrum lobortis nibh placerat ut. Etiam magna lorem, imperdiet sit amet felis nec, dictum eleifend felis. Donec vel molestie dui. Maecenas nulla eros, porta id nulla eu, imperdiet ullamcorper purus. Pellentesque commodo, massa vitae bibendum eleifend, libero turpis dapibus elit, eu auctor nisl dui rhoncus nibh. Nam vulputate sem nisi, non eleifend justo fringilla sed. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur tincidunt lectus nisl, quis semper sem fermentum sed. Nulla a mi vehicula, sagittis nulla ac, venenatis erat. Maecenas tristique nibh eget dignissim malesuada.
        </p>
      </div>
    </div>
  </div>
If you're like Bootstrap 4 it's even better because it already has Grid in Flex and all Flex classes native.

    

14.05.2018 / 16:14
1

It does not break because it has align="left" . My suggestion is: remove align="left" , add the image inside a div with a class with float:left and when it is smaller than "tal", just remove the float left: 

@media screen and (min-width:765px){
  .float-left-lg{
    float:left;
  }
}
<link rel="stylesheet" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">       
<div class="modal-content">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;
        </button>
        <h4 class="modal-title">Açougue</h4>
</div>
<div class="row modal-conteudo">
    <div class="modal-body">
            <div class="float-left-lg"><img class="img-modal" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"style="margin-right: 10px;"></div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer efficitur justo tellus, rutrum lobortis nibh placerat ut. Etiam magna lorem, imperdiet sit amet felis nec, dictum eleifend felis. Donec vel molestie dui. Maecenas nulla eros, porta id nulla eu, imperdiet ullamcorper purus. Pellentesque commodo, massa vitae bibendum eleifend, libero turpis dapibus elit, eu auctor nisl dui rhoncus nibh. Nam vulputate sem nisi, non eleifend justo fringilla sed. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur tincidunt lectus nisl, quis semper sem fermentum sed. Nulla a mi vehicula, sagittis nulla ac, venenatis erat. Maecenas tristique nibh eget dignissim malesuada.
    </p>
  </div>
</div>
    
14.05.2018 / 16:20
0

An alternative is to place the text inside another <p> tag: 

<div class="modal-body">
    <p>
        <img class="img-modal" src="view/img/acougue.png" align="left" style="margin-right: 10px;">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer efficitur justo tellus, rutrum lobortis nibh placerat ut. Etiam magna lorem, imperdiet sit amet felis nec, dictum eleifend felis. Donec vel molestie dui. Maecenas nulla eros, porta id nulla eu, imperdiet ullamcorper purus. Pellentesque commodo, massa vitae bibendum eleifend, libero turpis dapibus elit, eu auctor nisl dui rhoncus nibh. Nam vulputate sem nisi, non eleifend justo fringilla sed. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur tincidunt lectus nisl, quis semper sem fermentum sed. Nulla a mi vehicula, sagittis nulla ac, venenatis erat. Maecenas tristique nibh eget dignissim malesuada.
        </p>
    </p>
</div>
    
14.05.2018 / 16:10
Procedures that call other procedures in data structure script for printer installation automation