CODEWITHSUNDEEP
htmlcss
Araf
Araf

Reputation: 273

How to show two items in a single row from an array of items in html?

I've a list of items and in webView I'm showing 4 elements in each row. But in mobileView i want to show 2 elements in a single row. This is 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>
            <small style="font-size: 11px; text-transform: uppercase;" ng-if="product.amountFlag==1"><strike>{{product.currencyCode}} {{product.commaSeparatedPrice}}</strike>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-{{product.discountAmount}}</small>
            <small style="font-size: 11px; text-transform: uppercase;" ng-if="product.amountFlag==0 && product.percentFlag==1"><strike>{{product.currencyCode}} {{product.commaSeparatedPrice}}</strike>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-{{product.discountPercent}}%</small>
            <div class="d-flex justify-content-between">
                <small style="font-size: 11px; text-transform: uppercase;color:coral" ng-if="product.amountFlag==1">{{product.currencyCode}} {{product.commaSeparatedFinalPrice}}</small>
                <small style="font-size: 11px; text-transform: uppercase;color:coral" ng-if="product.amountFlag==0 && product.percentFlag==1">{{product.currencyCode}} {{product.commaSeparatedFinalPrice}}</small>
                <small style="font-size: 11px; text-transform: uppercase;color:coral" ng-if="product.amountFlag==0 && product.percentFlag==0">{{product.currencyCode}} {{product.commaSeparatedPrice}}</small>
                <small style="font-size: 11px;"><a href="{{product.messengerLink}}"><i class="fab fa-facebook-messenger"></i> Buy</a></small>
            </div>
        </div>
    </div>
</div>

This is my css media query:

@media (max-width: 425px) {
    .header-img {
        background-image: url('/img/bg-mobile-new.jpeg') !important;
    }
    .cus-button {
        text-align: center!important;
    }
    .cus-heading {
        padding-left: 15px!important;
    }

    .container {
        text-align: center
    }


  }

This is the webView:

enter image description here

This is how it looks like in mobile:

enter image description here

What do I need to do to show 2 items in one row in mobileView?

Upvotes: 2

Views: 953

Answers (1)

Rmaxx
Rmaxx

Reputation: 1187

<div class="col-md-3 ...etc

Sets the width (at medium res.) to 3 out of 12 columns = 4

You can default it to 2 columns at lower resolutions bij doing this:

<div class="col-6 col-md-3 ...etc

maybe change productlist to product, since the loop is around the 'list' now

Also: remove on the row:

margin-left: 39vh; margin-right: 39vh;

if you want to center the page use a 

<div class="container">...</div>

around the row

check:grid system bootstrap

Upvotes: 1

Related Questions