CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3flexbox
Baps
Baps

Reputation: 103

How to implement this notification design and have it sensibly responsive

I am attempting to implement this, simple enough design for a notification block.

Simple notification block

Including the ability to respond by wrapping the text block on smaller screens, similar to the below;

Simple notification block small view

The intention here is to center align the notification to the parent row, and preferably when the viewport is too small, have the text wrap and height of the horizontal banner on which it sits increase in height accordingly. This will be included in a bootstrap project (may affect floats etc).

Here is a pen showing one of the more simple approaches (and probably closest so far) I've been trying to 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 is a 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 is a row below</p>
    </div>
  </div>
</div>

There's quite a few suggestions for vertically centering text in this manner, most appear to rely on line-height which is an issue here with wrapping the text.

This may not be the best approach due to using line-height, but the problems here are;

  1. Preventing the circular container and text container from wrapping.
  2. Wrapping the text within the container while still maintaining the overall height/vertically centered position of the text block.
  3. Wrapping the text with a sensible line-height.

Adding white-space: nowrap; to the .notification element does prevent #1, but prevents the text from wrapping, which simply extends past the viewport.

Can anyone shed any light on a better approach? Any thoughts would be appreciated.

Many thanks,

Baps.

Upvotes: 1

Views: 593

Answers (1)

Michael Benjamin
Michael Benjamin

Reputation: 371301

Hopefully this sets you on the right path.

I've removed a lot of unnecessary code. I've also removed the prefixes for the demo.

This adjustment may be all you 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 a flex container
  2. Vertically center both flex children (.notification-circle and .notification-block)
  3. Don't grow. Don't shrink. Remain fixed at 150px width.
  4. Changed from margin-left: -30px
  5. Relocated code from span child
  6. Ensure .notification-block doesn't overlap .notification-circle

Upvotes: 1

Related Questions