I have a list of items that are displayed in `webView` with 4 elements per row. However, for `mobileView`, I would like to show only 2 elements in each row. Below is an example from my HTML file:
<div class="row my-3 cust-heading" style="margin-left: 39vh; margin-right: 39vh;">
<div class="col-md-3 my-4 products" ng-repeat="product in productList track by $index" ng-if="$index<12">
<div class="productList">
<img class="product-image mb-2" src="{{product.imageLink}}" />
<h6 class="product-name" style="font-size: 14px;">
<b>{{product.productName}}</b>
</h6>
...
</div>
</div>
</div>
This CSS media query adjusts styling for mobile devices:
@media (max-width: 425px) {
.header-img {
background-image: url('/img/bg-mobile-new.jpeg') !important;
}
...
}
Here is how it looks on `webView`:
https://i.sstatic.net/kjWT7.png
And here is the display on mobile:
https://i.sstatic.net/p7chM.png
To adjust the layout for `mobileView` and display 2 items per row, some modifications need to be made in the code. What steps should I take to achieve this?