I need assistance with modifying a code snippet to display a menu with categories. Here's the current code:
<div class=" d-md-block">
<div class="container">
<div class="row">
<div class="col p-0 m-0">
<ul class="Categories__Menu">
@foreach($categories->take(6) as $category)
<li class="">
<a href="javascript:void(0)" name="category" id="{{$category->id}}">{{$category->name}}</a>
</li>
@endforeach
<li><a data-toggle="modal" id="showCategories" data-target=".bd-example-modal-lg" href="">More <i class="fa fa-caret-down" aria-hidden="true"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
Can you help me adjust it so that on small devices, only 2 list items are displayed instead of 6, and on medium devices, only 3 list items are shown?