CODEWITHSUNDEEP
htmlcssresponsive-designsass
BillPull
BillPull

Reputation: 7013

Responsive text width in LI with icon image

I have a list of products that I want to display with a thumb icon on the left of each item.

How can I have the product description display on the right without wrapping the text on smaller screens.

HTML

<ul>
    <li class="cf">
      <span id="customizeImage1" class="product-customize-image"></span>
      <div class="product-menu-txt">
        <a href="/Product/Customize/769497">Friend Maker - Serves 8-10</a>
        ($14.99)<br>
        6 Donuts<br>
        6 Bagel &amp; Cream Cheese - 1 (8oz) tub<br>
        An assortment of our most favored varieties.
      </div>
    </li>
  </ul>

CSS

* {
  margin:0;
  padding:0;
  font-family: Tahoma,Sans-Serif;
}

.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}

li {
  width: 100%;
  list-style-type: none;
  padding: 10px 0;
}

.product-customize-image {
  width:120px;
  height:120px;
  background:red;
  display:block;
  float:left;
  margin: 0 10px;
}

.product-menu-txt {
  float: left;
  width: 50%;
}

http://jsbin.com/girum/4/edit

wrapped text on smaller screen

Text that fits the width of the row

Upvotes: 1

Views: 1357

Answers (1)

Abhitalks
Abhitalks

Reputation: 28397

Easiest would be to use table layout with image and text displayed as table-cells.

Relevant CSS:

li {
  display: table;
}

.product-customize-image {
  display:table-cell;
}

.product-menu-txt {
  display: table-cell;
  padding-left: 8px;
}

Demo: http://jsbin.com/banuvoharo/1/

Upvotes: 1

Related Questions