CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Anconia
Anconia

Reputation: 4028

Responsive circle with images and text

I'm attempting to build the below circle with embedded logos and text. I've been using Bootstrap for responsiveness, and this piece needs to follow suit. I'm currently running into a couple issues:

1) Text stays on 1 line and does not wrap when there are multiple sentences

2) Can't embed the necessary logos or button

Also below is the HTML & CSS

enter image description here

    .circle {
      width: 100%;
      border-radius: 50%;
      text-align: center;
      font-size: 12px;
      padding: 50% 0;
      line-height: 0;
      position: relative;
      background: #38a9e4;
      color: white;
      font-family: Helvetica, Arial Black, sans;
    }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />

<div class="row">
  <div class="col-md-4 col-md-offset-4">
    <div class="circle">
      Text text text
    </div>
  </div>
</div>

Upvotes: 2

Views: 7695

Answers (2)

Christina
Christina

Reputation: 34652

enter image description here

You didn't say what you wanted to be done on smaller viewports. Here it stacks and centers since the content can't fit a circle without being very tiny and not good looking on smaller viewports.

DEMO: http://jsbin.com/duveli/1/

CSS:

body {
    background: #777;
    padding: 5% 0;
}

.feature {background:pink;padding:10% 0}
.circle .btn {
    border-radius: 40px;
    background: #000;
    border: #000;
}
.circle {
    width: 100%;
    padding: 10%;
    background: white;
    border-radius: 50px;
}
.circle-wrapper {
    margin: 0 5%;
    position: relative;
}
.circle .list-inline {
    font-size: 0px;
    margin: 0;
}
.circle .list-inline li {
    font-size: 20px;
    display: block;
}
.circle p {
    padding-top: 10%;
    margin: 0;
}
@media (min-width:460px) { 
    .circle .list-inline li {
        font-size: 50px;
        display: inline-block;
    }
    .circle-wrapper {
        max-width: 450px;
        position: relative;
        margin:0 auto;
    }
    .circle {
        height: 0px;
        padding: 50%;
        border-radius: 50%;
    }
    .circle > div {
        position: absolute;
        text-align: center;
        left: 10%;
        right: 10%;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        top:20%\9; /* ie8 hack test this out it's a guess */
    }
}

HTML:

<section class="feature">

<div class="circle-wrapper">
   <div class="circle text-center">
      <div>
         <ul class="list-inline">
            <li><img src="http://placehold.it/100x100/OOO/FFFFFF&text=image+1" alt=""></li>
            <li class="plus">+</li>
            <li><img src="http://placehold.it/100x100/OOO/FFFFFF&text=image+2" alt=""></li>
         </ul>
         <p>content goes herecontent goes herecontent goes herecontent goes herecontent goes herecontent goes herecontent goes herecontent goes here goes herecontent goes herecontent goes here</p>
         <p><a href="#" class="btn btn-primary">Button Goes Here</a></p>
      </div>
   </div>
</div>


</section>

Upvotes: 5

DFord
DFord

Reputation: 2358

As for your first issue, if you want each sentence on a separate line, use a line break, <br />.

If you just want the text to wrap, put the text inside of <p> tags or <span> tags so you can define the width. That way it will wrap when it reaches the width of the element.

Upvotes: 0

Related Questions