Измените нижний автоматически в соответствии с div с родителем

Question

Я создаю компоновку изотопов, чтобы сделать ее отзывчивой. Я создал единицу ширины столбца с эффектом capover caption. Все работает отлично, кроме режима реагирования. Я хочу изменить нижнюю часть заголовка автоматически в соответствии с родительской шириной div, но я не знаю, как это сделать. Можете ли вы мне помочь?

Это мой код: https://jsfiddle.net/dqfm3gj7/2/

HTML

        <figcaption> 
             <div class="title"> 
              <p>lorem ipsum</p> 
              <h2>blog title</h2> 
             </div> 
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed semper tincidunt semper. Pellentesque condimentum, ligula non rutrum malesuada.</p> 
            </figcaption> 
           </figure> 
          </a> 

     </div> 
     <div class="item item-width2"> <a href="#"> 
           <figure> 
            <img class="img-responsive" src="http://i.imgur.com/RVHcLal.jpg" alt="Image" /> 

            <figcaption> 
             <div class="title"> 
              <p>lorem ipsum</p> 
              <h2>blog title</h2> 
             </div> 
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed semper tincidunt semper. Pellentesque condimentum, ligula non rutrum malesuada, nulla lacus rhoncus nisi, nec fringilla massa urna quis eros. Integer faucibus placerat dui sit amet volutpat. Curabitur suscipit rhoncus lectus, sit amet fermentum lacus interdum sed.</p> 
            </figcaption> 
           </figure> 
          </a> 

     </div> 
     <div class="item"> <a href="#"> 
           <figure> 
            <img class="img-responsive" src="http://i.imgur.com/JkTsi3A.jpg" alt="Image" /> 

            <figcaption> 
             <div class="title"> 
              <p>lorem ipsum</p> 
              <h2>blog title</h2> 
             </div> 
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed semper tincidunt semper. Pellentesque condimentum, ligula non rutrum malesuada.</p> 
            </figcaption> 
           </figure> 
          </a> 

     </div> 
     <div class="item"> <a href="#"> 
           <figure> 
            <img class="img-responsive" src="http://i.imgur.com/JkTsi3A.jpg" alt="Image" /> 

            <figcaption> 
             <div class="title"> 
              <p>lorem ipsum</p> 
              <h2>blog title</h2> 
             </div> 
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed semper tincidunt semper. Pellentesque condimentum, ligula non rutrum malesuada.</p> 
            </figcaption> 
           </figure> 
          </a> 

     </div> 
     <div class="item"> <a href="#"> 
           <figure> 
            <img class="img-responsive" src="http://i.imgur.com/JkTsi3A.jpg" alt="Image" /> 

            <figcaption> 
             <div class="title"> 
              <p>lorem ipsum</p> 
              <h2>blog title</h2> 
             </div> 
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed semper tincidunt semper. Pellentesque condimentum, ligula non rutrum malesuada.</p> 
            </figcaption> 
           </figure> 
          </a> 

     </div> 
     <div class="item"> <a href="#"> 
           <figure> 
            <img class="img-responsive" src="http://i.imgur.com/JkTsi3A.jpg" alt="Image" /> 

            <figcaption> 
             <div class="title"> 
              <p>lorem ipsum</p> 
              <h2>blog title</h2> 
             </div> 
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed semper tincidunt semper. Pellentesque condimentum, ligula non rutrum malesuada.</p> 
            </figcaption> 
           </figure> 
          </a> 

     </div> 
     <div class="item"> <a href="#"> 
           <figure> 
            <img class="img-responsive" src="http://i.imgur.com/JkTsi3A.jpg" alt="Image" /> 

            <figcaption> 
             <div class="title"> 
              <p>lorem ipsum</p> 
              <h2>blog title</h2> 
             </div> 
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed semper tincidunt semper. Pellentesque condimentum, ligula non rutrum malesuada.</p> 
            </figcaption> 
           </figure> 
          </a> 

     </div> 
    </div> 
    <!-- end blog-container --> 
</div> 
<!-- end blog-section --> 

CSS

#blog-container{ 
    max-width: 1140px; 
} 

    #blog-container:after{ 
     content: ''; 
     clear: both; 
     display: block; 
    } 

figure{ 
    float: left; 
    position: relative; 
    overflow: hidden; 
    height: auto; 
} 

figcaption{ 
    position: absolute; 
    bottom: -71%; 
    width: 100%; 
    height: 100%; 
    background: rgba(255,255,255,0.5); 
    padding: 10px; 
    overflow: hidden; 
    transition: bottom .5s; 
    color: #615b51; 
} 

    figcaption h2, 
    figcaption .title p{ 
     margin: 0; 
     text-transform: uppercase; 
    } 

.item-width2 figcaption{ 
    bottom: -86%; 
} 

    figcaption:hover{ 
     bottom: 0; 
    } 

.item, 
.item-sizer{ 
    width: 19.298%; 
    height: auto; 
} 

.item-width2{ 
    width: 39.5%; 
} 

.item{ 
    float: left; 
    margin-bottom: 12px; 
} 

@media(max-width: 736px){ 
    .item, 
    .item-sizer, 
    .item-width2{ 
     width: 48.641%; 
    } 
} 

JS

var $container = jQuery('#blog-container'); 

$container.isotope({ 
    itemSelector : '.item', 
    percentPosition: true, 
    layoutMode: 'masonry', 
    masonry:{ 
     columnWidth: '.item-sizer', 
     gutter: 10 
    } 
}); 

Answer 1

Насколько я понял, ваша проблема в том, что, когда страница становится более узким и @media правило применяется, все плитки получают одинаковый размер, но этикетки (figcaption) не ,

Вы пробовали применять одинаковые значения bottom для всех figcaption тегов внутри этого @media rule?

@media(max-width: 736px){ 

    ... 

    figcaption { 
     bottom: -71%; // Set the value you want all them to have 
    } 
} 

Если вы в конечном итоге, более сложные стили, и вы проблемы пытаетесь иметь это правило применяется ко всем различным figcaption тегов в вашей странице вы должны проверить CSS specificity этих правила и установить более конкретные один внутри блока @media. Вы можете проверить это, используя этот инструмент:

Вы также можете использовать !important annotation на bottom (или любом другом) объекте.

EDIT:

Если вы хотите, чтобы значение bottom свойства зависят от размера плитки вы должны установить его значение в % или вы можете также использовать calc() сделать некоторые операции (+, -, *, /) с % и любыми другими различными устройствами (например, bottom: calc(71% - 1em)).

Вы также можете использовать несколько мультимедийных запросов CSS для разных страниц ширины: https://css-tricks.com/css-media-queries.