Аккордеонное меню на мобильном видовом экране

Question

Я создал страницу с несколькими аккордеонами, у меня много проблем с ее совместимостью. То, что я хочу, так это то, что размер уменьшается, аккордеоны начинают уплотняться в одну строку. Я пробовал использовать

<meta name="viewport" content="width=device-width"> 

Но, похоже, это еще хуже. Каков наилучший способ сделать это?

Heres мой codepen - http://codepen.io/Ahhmmogh/pen/ZGxLmo

Любая помощь будет принята с благодарностью.

Answer 1

Вы должны сделать некоторые CSS, чтобы это сделать, и для этого вам нужно Media-queries в вашем CSS:

> /*Select your break point*/ 
>  @media (max-width: 500px) { 
>  /*Make the elements fit with the whole width */ 
>  .container { 
>   min-width:100% !important; 
>  } 
>  .whole-body{ 
>   min-width:100% !important; 
>  } 
>  } 

работы: jsfiddle.

Обратите внимание, что: основная миссия Viewport meta - масштабирование вашей страницы в соответствии с порт просмотра клиента, для получения дополнительной информации: Viewport.