Trying to create a circular image and a horizontal bar of equal height next to it in a user profile. It needs to be responsive and look like the image below, with text in the black bar.
Looking for help with CSS to achieve this:
I currently have the code below, but the black bar is displaying below the circle instead of beside it. I also need assistance making sure the black bar starts in the middle of the image, positions the text correctly inside the bar, and maintains responsiveness.
<div class="col-md-12 profile-topbar">
<div class="round">
<img src=<%= image_path('profile.gif') %>>
</div>
<div class="text-bar">
...
</div>
</div>
In my CSS file:
.round {
margin: 2em;
border-radius: 50%;
overflow: hidden;
width: 150px;
height: 150px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
box-shadow: 0 0 8px rgba(0, 0, 0, .8);
-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
-moz-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
}
.round img {
display: block;
width: 100%;
height: 100%;
}
.text-bar {
display: inline-block;
background: #FFF;
left: 222px; //Issue: not responsive. The block should start exactly halfway from the image.
width: 100%;
}
.text-bar p {
left: 250 px;
}