CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
clement360
clement360

Reputation: 121

Overlapping divs inside a bootstrap container div - CSS

I'm trying to create a sound control bar that shows the current position of playback with a loading bar that is underneath the control bar. example:

This is what it looks like when my window size is medium or large. but when it gets smaller, it turns into this:

not only is it no longer centered, but it shifts everything left and the position bar over flows. you will notice that the position bar is fine, the real problem comes from the play control div instantly shrinking and shifting left. is there a way to fix this?

HTML:

<div class="container">
     <div class="playBar row"></div>
     <div class="positionBar row"></div>
</div>

CSS:

.container { position: relative }
.playBar { 
  background-color: rgba(173, 173, 173, 0.55);
  border-radius: 5px;
  height: 50px;
  font-size: 27px;
  background: linear-gradient(to bottom, rgba(207, 207, 207, 0.58) 0%,rgba(134, 134, 134, 0.54) 100%);
  z-index: 1;
  position: absolute;
  width: inherit; 
}
.postionBar { 
  border-radius: 5px;
  background-color: #CC5A5A;
  z-index: 10;
  height: 50px; 
}

Upvotes: 0

Views: 801

Answers (1)

Bobo
Bobo

Reputation: 1016

If you set a min-width on the bar, it won't shrink past a certain point.

min-width: 100%;

Upvotes: 1

Related Questions