In the help screen of an app based on JQuery Mobile, we have a layout shown in the following screen grab:
We’re trying to duplicate this in Framework7 and we’re failing dismally. Here’s what we’ve tried:
<div id="helpPage" class="page" data-name="help">
<div class="page-content">
<center><h2>Help</h2></center>
<div class="block">
<div class="row">
<a href="/tutorial/" class="col button button-fill">
<div class="item-media">
<i class="fas fa-user-graduate"></i>
</div>
<div class="item-inner">
<div class="item-title">View<br>Tutorial</div>
</div>
</a>
<a href="/privacy/" class="col button button-fill">
<div class="item-media">
<i class="fas fa-eye"></i>
</div>
<div class="item-inner">
<div class="item-title">Privacy<br>Policy</div>
</div>
</a>
<!--
<a href="/tutorial/" class="help col button button-fill button-large fas fa-user-graduate"> View<br>Tutorial</a>
<a href="/privacy/" class="help col button button-fill button-large fas fa-eye"> Privacy<br>Policy</a>
-->
</div>
<br>
<div class="row">
<a href="/feedback/" class="col button button-fill button-large"><i class="far fa-comments"></i>Send<br>Feedback</a>
<a href="/errors/" class="col button button-fill button-large"><i class="fas fa-times"></i>Error<br>Codes</a>
</div>
<br>
<div class="row">
<a href="/about/" class="col button button-fill fas fa-info"> About<br>Us</a>
</div>
</div>
<div class="block">
<div class="row">
<h4>Removed After Testing</h4>
<a href="/welcome.html/1/" class="col button button-fill color-blue fas fa-heart">Rerun Onboarding</a>
</div>
</div>
</div>
</div>
Anyone have any suggestions on how to accomplish this? Or perhaps have another solution (other than one column of 5 rows of buttons).
Thanks.