Why doesn't my text automatically increase the height of the container?

Question

On a shopify site, I have inside of tags code that is supposed to pull the description of a product. Most of it gets cut off because the container has a set width, but I don't understand why it won't just run vertically and increase the height of the container? I tried overflow-x:hidden, overflow-y:visible but that doesn't do it. Even if I set the container to have a fixed height the text will not run vertically. What am I missing here?

<li class="grid-item one-fifth product-excerpt">
        {% assign featured = link.title | append: ' featured' | handleize %}
        {% if linklists[featured].links %}
        {% assign featured_object = linklists[featured].links.first %}
        <a href="#">Featured</a>
            <img src="{{ featured_object.object.featured_image | product_img_url: 'medium'}}" />
          <a href="{{featured_object.url}}">{{featured_object.object.title}}</a>

//need this text to run vertically
        <span>{{featured_object.object.description | strip_html | slice: 0, 100 | append: '...' }}</span>

        {% endif %}

      </li>

CSS

 .site-nav--dropdown .product-excerpt span {
font-size: 14px;
font-family: 'Open Sans';
display: block;
width: 100%;
overflow: hidden;
padding: 0px 0px 13px 0px;
}

.site-header .grid>.grid-item, .site-header .grid--rev>.grid-item, .site-header .grid--full>.grid-item {
float: none;
display: table-cell;
vertical-align: middle;
}

score 3 · Answer 1 · answered Jun 20 '16 at 15:37

3

change this overflow: hidden; to overflow: auto;

answered Jun 20 '16 at 15:37

Javad

63
1
9

check all of your css for overriding `overflow` – Javad Jun 20 '16 at 15:49
change this `display:block !important;` – Javad Jun 20 '16 at 15:55
Show these parts of your css in chrome element inspector – Javad Jun 20 '16 at 23:40

Why doesn't my text automatically increase the height of the container?

1 Answers1