Сложности в отзывчивом выпуске

Question

Я пытаюсь создать набор полей с css, где легенда центрирована! У меня есть две проблемы. 1-й вариант - размер окна изменяется в соответствии с его содержимым, но я хочу сохранить одинаковый размер для всего набора полей независимо от того, содержание больше от других или нет. Как достичь этого?

2-я проблема: я пытаюсь добавить дескриптор в верхнюю часть легенды, чтобы он выглядел как портфель. Это хорошо работает для обычных скинов, но в небольших скинах этот дескриптор смещен от начала координат Как это сделать, чтобы ручка стала отзывчивой и не смещалась в более мелкие шкуры?
Проблема с DEMO.

Ручка:

.handle { 
    position: absolute; 
    top: -28px; 
    left: 50%; 
    border: 12px solid rgba(77, 53, 33, 1); 
    border-bottom: 0 none; 
    width: 48px; 
    height: 28px; 
    margin-left: -30px; 
    -webkit-border-radius: 10px 10px 0 0; 
    -moz-border-radius: 10px 10px 0 0; 
    border-radius: 10px 10px 0 0; 
} 

Answer 1

Это позволит устранить проблему ручки.

.handle { 
    top: -45px; 
} 

@media screen and (min-width: 768px) { 
    .handle { 
    top: -28px; 
    } 
} 

И это исправит проблему с высотой.

@media screen and (min-width: 768px) { 
    .inner-child { 
    min-height: 300px; 
    } 
} 

Answer 2

Второй выпуск может быть решена установкой «сверху: автоматический» и двигаться выше ручка с «маржинальным-топом: -46px»

.handle { 
position: absolute; 
top: auto; 
margin-top:-46px; 
left: 50%; 
border: 12px solid rgba(77, 53, 33, 1); 
border-bottom: 0 none; 
width: 48px; 
height: 28px; 
margin-left: -30px; 
-webkit-border-radius: 10px 10px 0 0; 
-moz-border-radius: 10px 10px 0 0; 
border-radius: 10px 10px 0 0; 
} 

Для увеличения вертикального зазора между коробками вы могли бы увеличить до 70px или более, маржа снизу.

.feature .inner-child{ 
    ... 
    margin: 15px 0 70px 0; 
} 

Первая проблема может быть решена с помощью Jquery, вычисляющего более высокий блок и устанавливающего одну и ту же высоту для всех остальных. Вы можете создать итерацию, которая найдет максимальную высоту элементов «.inner-child» и установите эту высоту для всех.

jQuery(document).ready(function(){   
    var maxHeight = 0; 

    $(".inner-child").each(function(key, value){ //Create a iteration of all .inner-child elements 
     maxHeight = Math.max($(value).height(), maxHeight); //find the height of higher box 
    }); 

    $(".inner-child").css("height", maxHeight); //Set height 

    }); 

Я создаю DEMO этого решения.