Working on an ASP.NET Core MVC project, with a FAQ section in the view displayed as follows:
<div class="container">
<div class="row ">
<div class="col-xl-2 mx-auto d-none d-sm-block">
<div class="service_details_left">
<div class="nav nav-pills" id="v-pills-tab" role="tablist"
aria-orientation="vertical">
</div>
</div>
</div>
<div class="accordion_area col-xl-8">
<div class="faq_ask">
<h3 class="large-heading-3">Frequently Asked Questions</h3>
<div id="accordion">
@foreach (var item2 in Model.OrderBy(a => a.Order))
{
<div class="card">
<div class="card-header" id="@item2.Id+'headingTwoa'">
<h5 class="mb-0">
<button class="btn btn-link collapsed " data-toggle="collapse"
data-target="#@item2.Id" aria-expanded="false"
aria-controls="collapseTwo">
<span class="expandable-heading"> @Html.DisplayFor(modelItem => item2.Description)</span>
</button>
</h5>
</div>
<div id="@item2.Id" class="collapse" aria-labelledby="headingTwoa"
data-parent="#accordion" style="">
<div class="card-body">
@Html.Raw(item2.Answer)
</div>
</div>
</div>
}
</div>
</div>
</div>
<div class="col-xl-2">
</div>
</div>
</div>
On wide screens, the FAQ is displayed correctly, but on mobile view, the question's description is hidden.
https://i.sstatic.net/r4FHK.png
If you have any advice on how to handle this issue, please share!