Bootstrap Responsive no break for bass line

Asked

Viewed 1,101 times

0

I have the following code:

    <div class="welcome-content row">
      <figure class="col-xs-12 col-sm-12 col-md-6">
        <%= image_tag('feed/welcome2016.jpg') %>
      </figure>
      <p class="welcome-text col-xs-12 col-sm-12 col-md-6">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sodales placerat vestibulum. Vivamus in pretium lorem. Mauris rutrum tempus neque sit amet aliquam. Ut vel mi pulvinar, condimentum nisl non, lobortis purus. Praesent ullamcorper purus dui, a feugiat lacus vestibulum vel. Vestibulum tincidunt ac lectus in venenatis. Donec porttitor lacus libero. mentum nisl non, lobortis purus. Praesent ullamcorper purus dui, a feugiat lacus vestibulum vel. Vestibulum tincidunt ac lectus in venenatis. Donec porttitor lacus libero. el. Vestibulum tincidunt ac lectus in venenatis. Donec porttitor lacus libero. el. Vestibulum tincidunt ac lectus in venenatis. Donec porttitor lacus libero. tis. Donec porttitor lacus libero. tis. Donec porttitor lacus libero. tis. Donec porttitor lacus libero.
      </p>
    </div>

however when I decrease the size of the screen it does not break the block of text to bottom line getting the image above and the text below.

Maybe it’s something easy but I’m not seeing it :S .

twitter-bootstrap responsive-layout
  • 1

    I couldn’t understand you, what exactly do you want?

  • @Samirbraga when resizing the screen the right would be the text run down the figure, but this is not running it =/

  • Marcelo’s answer doesn’t suit him?

  • @Samirbraga the example of it worked but applying here in my did not work, it must be some detail beast, the strange that in the other elements works right only in this no, IE, it is not problem in bootstrap

  • Have you any local style that moves with any of these elements?

  • Yes I have a stylesheet for the block where this code is. @Samirbraga

  • Better post it to take a look. You think the problem might live there?

  • 1

    @Samirbraga found the problem was in a css same, I took and it worked =D thank you very much helped me man

  • I’m glad I could help... :)

Show 4 more comments

2 answers

1

I imagine that the problem is to be putting in a tag p, I made a small change and see if it resolves.

<div class="welcome-content row">
    <figure class="col-xs-12 col-sm-12 col-md-6">
        <img src="http://lorempixel.com/400/200/sports/5/">
    </figure>
    <div class="welcome-text col-xs-12 col-sm-12 col-md-6">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sodales placerat vestibulum. Vivamus in pretium lorem. Mauris rutrum tempus neque sit amet aliquam. Ut vel mi pulvinar, condimentum nisl non, lobortis purus. Praesent ullamcorper purus dui, a feugiat lacus vestibulum vel. Vestibulum tincidunt ac lectus in venenatis. Donec porttitor lacus libero. mentum nisl non, lobortis purus. Praesent ullamcorper purus dui, a feugiat lacus vestibulum vel. Vestibulum tincidunt ac lectus in venenatis. Donec porttitor lacus libero. el. Vestibulum tincidunt ac lectus in venenatis. Donec porttitor lacus libero. el. Vestibulum tincidunt ac lectus in venenatis. Donec porttitor lacus libero. tis. Donec porttitor lacus libero. tis. Donec porttitor lacus libero. tis. Donec porttitor lacus libero.
    </div>
</div>

keeps running on jsfiddle or outworking

  • So in your example it worked, but right here changing to div did not work =/ strange ta certinho I THINK!!!

1

Thanks to the help of Marcelo and Samir I fucked up the code and I realized that I was using the code below to center the object vertically and this was interfering with the element and causing the problem I mentioned above, I removed these styles and everything worked out.

  .welcome-content
  {
    display: flex;
    align-items: center;
  }

Thank you all

Browser other questions tagged twitter-bootstrap responsive-layout

You are not signed in. Login or sign up in order to post.