How to add circle image in ET Text in OneEngine theme for WordPress

3 Views

I am using OneEngine theme on WordPress to create an About Me section. I want to create a similar part in my website.

Desired appearance

Read More

So far I have achieved this.
Appearance right now

Using the code: 

<span><div id="about" class="row">
<span class="col-md-6">
<div class="img-circle">
<img src="http://placekitten.com/g/400/200" />
</div>
</span>
<span class="col-md-6">
<p>Hello :) Testing. </p> </span>
</div> </span>

I am unable to make the image appear as a circle like above. I have tried adding CSS in ET Text and using <div class="img-circle"> but that does not work.

Post Views: 3

Related posts

3 comments

  1. You need to use img-circle on the img tag and not on the parent element div. Remember to use equal width and height image for circular images to avoid distortion.

    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="image">
  <img class="img-circle" src="http://placehold.it/200x200" />
</div>

  2. Add following code into your style.css

    .img-circle img {
border-radius: 50%;
border: 2px solid;
}

  3. Add the img-circle class to the img tag, not the div tag. OR, define the class like:

    .img-circle > img {
    border-radius: 50%;
}

Comments are closed.