CODEWITHSUNDEEP
htmlcss
user3861559
user3861559

Reputation: 993

align image next to text

I am trying to display image and text like in this image https://i.sstatic.net/py8NX.jpg. But I am facing 2 issues on my fiddle

  1. background image doesn't show up.
  2. Contents stack up even when there is space is right. I believe its some extra padding/margin I have in code but not sure where.

HTML

<section class="freedom_carousel">
  <ul class="two-col">
    <li class="pen"> 
      <span class="icon-text"> <em>THis is </em> text text text</span> 
    </li>
    <li class="phone"> 
      <span class="icon-text"> <em>THis is </em> text text text</span> 
    </li>
    <li class="arrow"> 
      <span class="icon-text"> <em>THis is </em> text text text</span> 
    </li>
    <li class="download"> 
      <span class="icon-text"> <em>THis is </em> text text text text</span>   
    </li>
  </ul>
</section>

Upvotes: 0

Views: 94

Answers (1)

JRulle
JRulle

Reputation: 7568

Your styles required some serious reworking, take a look here: DEMO

HTML

<section class="freedom_carousel"> <!--Freedom section -->
  <ul class="two-col left-col">
    <li class="pen"> <span class="icon-text"><em>THis is </em> text text text text text text text </span></li>
    <li class="phone"> <span class="icon-text"><em>THis is </em> text text text text text text text </span></li>
  </ul>
  <ul class="two-col right-col">
    <li class="arrow"> <span class="icon-text"><em>THis is </em> text text text text text text text </span></li>
    <li class="download"> <span class="icon-text"><em>THis is </em> text text text text text text text </span></li>
  </ul>
</section>

CSS

.left-col, .right-col {
  list-style: none;
  width: 50%;
  float: left;
  margin: 0;
  padding: 0;
}

.two-col li {
  padding-left: 30px;
}

.two-col li.pen{
  background: url("https://cdn2.iconfinder.com/data/icons/inverticons-stroke-vol-3/32/pen_write_edit_sketch_draw_compose-20.png");
  background-repeat: no-repeat;
}

EDIT: Here is a sample media query for your mobile needs. It is currently set to apple when the screen size is less than 450px wide (you can customize this to your needs): DEMO2

@media (max-width:450px) {
    .freedom_carousel ul.two-col li span.icon-text {
         text-align: center; 
    }
    .left-col, .right-col {
        width: 100%;
    }
    .two-col li {
        padding-left: 0px;
        text-align: center;
        padding-top: 50px;
    }
    .two-col li.pen, .two-col li.phone, .two-col li.arrow, .two-col li.download  {
        background-position: 50%;
    }
}

Upvotes: 1

Related Questions