Здравствуйте!
Проблема такова, при сужении экрана из десктопной версии к мобильной аккордеон введёт себя неадекватно до тех пор пока не обновится страница в том же разрешении. Необходимо что бы текст находился ниже заголовка с именем. Прилагаю скриншот и jsfiddle
Заранее благодарю за помощь и потраченное время.
https://jsfiddle.net/qLhw27kp/2/
$( function() {
var icons = {
header: "up",
activeHeader: "down"
};
$( "#accordion" ).accordion({
icons: icons,
collapsible: true
});
$( "#toggle" ).button().on( "click", function() {
if ( $( "#accordion" ).accordion( "option", "icons" ) ) {
$( "#accordion" ).accordion( "option", "icons", null );
} else {
$( "#accordion" ).accordion( "option", "icons", icons );
}
});
} );
.comments-m{
display: block;
}
.comments-content-m h2{
text-align: center;
line-height: 40px;
font-size: 30px;
font-weight: 700;
color: #464646;
}
.comments-content-m .small{
margin-top: 10px;
line-height: 30px;
font-size: 18px;
font-weight: 300;
color: #b7b7b7;
}
.commentators-m h3{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
position: relative;
margin-top: 30px;
cursor: pointer;
}
.commentators-m h3 span{
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
padding-left: 10px;
font-size: 18px;
font-weight: 700;
color: #464646;
}
.commentators-m h4{
padding-left: 48px;
padding-top: 10px;
padding-bottom: 10px;
font-size: 14px;
font-weight: 300;
color: #b7b7b7;
}
.commentators-m p{
padding-left: 48px;
font-size: 16px;
line-height: 24px;
font-weight: 300;
color: #b7b7b7;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="comments-m">
<div class="comments-content-m center">
<h2 class="h2">Comments from our<br> customers</h2>
<h2 class="small">You can ask your question by filling in the form<br> Callback</h2>
<div class="comnnetators-m" id="accordion">
<h3><img src="img/coms.png" alt=""><span>Paul Demichev</span></h3>
<div>
<h4>Web designer</h4>
<p>When making such important decisions as the conclusion of the wage project, it is important to simultaneously run a number of conditions.</p>
</div>
<h3><img src="img/coms.png" alt=""><span>Oleg Topanic</span></h3>
<div>
<h4>Программист</h4>
<p>This is a Bank that we trust. Our history of working with Alfa-Bank has about 15 years. We have almost from the base</p>
</div>
<h3><img src="img/coms.png" alt=""><span>Julia Usina</span></h3>
<div>
<h4>Повар</h4>
<p>In 2010, we came to the conclusion that we need a payroll project. Naturally, we considered the offers of different banks.</p>
</div>
<h3><img src="img/coms.png" alt=""><span>Serdyuk Elena</span></h3>
<div>
<h4>Студентка</h4>
<p>When making such important decisions as the conclusion of the wage project, it is important to simultaneously run a number of conditions.</p>
</div>
<h3><img src="img/coms.png" alt=""><span>Kulikov Vlad</span></h3>
<div>
<h4>Главный механик</h4>
<p>When making such important decisions as the conclusion of the wage project, it is important to simultaneously run a number of conditions.</p>
</div>
<h3><img src="img/coms.png" alt=""><span>Andrey Tikhonov</span></h3>
<div>
<h4>Сварщик</h4>
<p>When making such important decisions as the conclusion of the wage project, it is important to simultaneously run a number of conditions.</p>
</div>
</div>
</div>
</div>
Современные инструменты для криптотрейдинга: как технологии помогают принимать решения
Апостиль в Лос-Анджелесе без лишних нервов и бумажной волокиты
Основные этапы разработки сайта для стоматологической клиники
Продвижение своими сайтами как стратегия роста и независимости