Как исправить ограничение на количество символов в figcaptions? сетка галерея

Question

Я пытаюсь исправить figcaption, но безрезультатно. в чем проблема?

      <style>
    .items {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        grid-gap: 40px 20px;
    }
    
    
    figcaption.name {
        padding: 8px 15px;
        text-align: center;
        background: #EEE;
        color: #444;
        font-weight: 600;
        max-height: 30px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }
    figcaption.year {
        background: #EEE;
        color: #444;
        font-weight: 100;
        text-align:left;
    }
    
    
    @media only screen and (max-width: 1000px){.items {grid-template-columns: repeat(5, 1fr);}}
    @media only screen and (max-width: 800px) {.items {grid-template-columns: repeat(4, 1fr);}}
    @media only screen and (max-width: 600px) {.items {grid-template-columns: repeat(3, 1fr);}}
    @media only screen and (max-width: 400px) {.items {grid-template-columns: repeat(2, 1fr);}}

</style>

https://jsfiddle.net/zup37bjv/

Пытаетесь отредактировать этот код, использовать div над цифрой? какое решение?

Answer 1