Twitter Bootstrap Question posted in

Flex div not render correctly-Twitter bootstrap

I’ve rows with two flex divs inside each one. In one div i show an image and inside the other there is text. I don’t understand why some divs shows correctly but in others the text overflows.

If i reload the page this bug disappears but if i delete cache it comes again.

Any ideas? Thanks in advance.

.box {
    position: relative;
    }

    .image-box-right, .image-box-left {
    width: 50%;
    }

    .image-box-left {
    float: left;
    }

    .image-box-right {
    float: right;
    }

    .title {
    font-size: 0.95em;
    }

    .text-box-right, .text-box-left {
    background-color: #d53e73;
    width: 55%;
    height: 80%;
    color: white;
    box-sizing: border-box;
    padding: 15px;
    /* flex align items */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1em;
    position: absolute;
    margin-top: 5%;
    top: 0;
    right: 0;
    }

    .text-box-left {
    left: 0;
    }
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row box">
        <div class="col-12 px-0">
            <img class="image-box-right" src="img/image1.jpg">
            <div class="text-box-left dark">
                <p class="title"><span>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</span>
                    <a href="../shared/note.html"> MORE <i class="fa fa-arrow-right"
                                                                                aria-hidden="true"></i></a>
                </p>
            </div>
        </div>
    </div>
    <div class="row box">
        <div class="col-12 px-0">
            <img class="image-box-left" src="img/image2.jpg">
            <div class="text-box-right">
                <p class="title"><span>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</span>
                    <a href="../shared/note.html">MORE <i class="fa fa-arrow-right"
                                                                                aria-hidden="true"></i></a>
                </p>
            </div>
        </div>
    </div>
Tags:

2

Answers


  1. 0

    I don’t think you need inline-block:

    .notes-text-box-right, .notes-text-box-left {
    background-color: #d53e73;
    width: 55%;
    height: 80%;
    color: white;
    box-sizing: border-box;
    padding: 15px;
    /* flex align items */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1em;
    position: absolute;
    margin-top: 5%;
    top: 0;
    right: 0;
    }
    Login or Signup to reply.
  2. 0

    You wrote two displaysettings in one CSS rule:

    .notes-text-box-right, .notes-text-box-left {
  [...]
  display: flex;
  [...]
  display: inline-block;
  [...]
}

    The second one overwrites the first one, so you better erase that.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search