html - How to implement this notification design and have it sensibly responsive -

i attempting implement this, simple enough design notification block.

including ability respond wrapping text block on smaller screens, similar below;

the intention here center align notification parent row, , preferably when viewport small, have text wrap , height of horizontal banner on sits increase in height accordingly. included in bootstrap project (may affect floats etc).

here pen showing 1 of more simple approaches (and closest far) i've been trying achieve this.

*,  html {    font-family: arial;    font-size: 20px;  }  .extra-row {    text-align: center;    padding: 1em;    border: 1px solid #eee;    background-color: #ccc;  }  .notification {    text-align: center;    color: #fff;    white-space: nowrap;  }  .notification-circle {    width: 150px;    height: 150px;    background-color: #3d7a1a;    -moz-border-radius: 75px;    -webkit-border-radius: 75px;    border-radius: 75px;    position: relative;    display: -webkit-flexbox;    display: -ms-flexbox;    display: -webkit-flex;    display: inline-flex;    -webkit-flex-align: center;    -ms-flex-align: center;    -webkit-align-items: center;    align-items: center;    justify-content: center;  }  .notification-icon {    font-size: 5em;  }  .notification-block {    min-height: 150px;    line-height: 150px;    display: inline-block;    margin-left: -30px;    vertical-align: top  }  .notification-block span {    background-color: #54a127;    padding: 1em;    padding-left: 50px;  }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>  <div class="container">    <div class="row extra-row">      <div class="col-lg-12">        <p>this row above</p>      </div>    </div>    <div class="row">      <div class="col-lg-12">        <div class="notification">          <div class="notification-circle"><span class="notification-icon">i</span>          </div>          <p class="notification-block"><span>lorem ipsum dolor sit amet, consectetur adipiscing elit. </span>          </p>        </div>      </div>    </div>    <div class="row extra-row">      <div class="col-lg-12">        <p>this row below</p>      </div>    </div>  </div>

there's quite few suggestions vertically centering text in manner, appear rely on line-height issue here wrapping text.

this may not best approach due using line-height, problems here are;

1. preventing circular container , text container wrapping.
2. wrapping text within container while still maintaining overall height/vertically centered position of text block.
3. wrapping text sensible line-height.

adding white-space: nowrap; .notification element prevent #1, prevents text wrapping, extends past viewport.

can shed light on better approach? thoughts appreciated.

many thanks,

baps.

hopefully sets on right path.

i've removed lot of unnecessary code. i've removed prefixes demo.

this adjustment may need:

.notification {      display: flex;                  /* 1 */      align-items: center;            /* 2 */      color:#fff; } .notification-circle {      flex: 0 0 150px;                /* 3 */      height: 150px;      background-color: #3d7a1a;       border-radius: 75px;      display: flex;      align-items: center;      justify-content: center; } .notification-block {      margin-left: -50px;             /* 4 */      background-color: #54a127;      /* 5 */      padding: 1em;                   /* 5 */      padding-left: 75px;             /* 5 */      z-index: -1;                    /* 6 */ } .notification-block span { } .notification-icon { font-size: 5em; } 

revised codepen

notes:

1. make wrapper flex container
2. vertically center both flex children (.notification-circle , .notification-block)
3. don't grow. don't shrink. remain fixed @ 150px width.
4. changed margin-left: -30px
5. relocated code span child
6. ensure .notification-block doesn't overlap .notification-circle