I'm currently working on a responsive website and utilizing media queries for that purpose. However, I've encountered an issue where the media queries don't seem to apply when the browser window is set to mobile view. Below is the snippet of my CSS and HTML code. Can anyone help me figure out how to make these queries work properly? Specifically, I want the content to have a right margin whenever the browser width is less than 760px.
@media all screen and (min-width:410) and (max-width:760px) {
.image2 {
display: flex;
flex-wrap: wrap;
margin-right: 1000%
}
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container-fluid text-center">
<h3 class="text1" style="margin-top: 30px; font-family: 'Fira Sans Condensed';font-size:60px;"> Multi Currency Wallet</h3> <br> <br>
<div class="row text-center ">
<div class="col-sm-4">
<img src="Assets/img/deyapay.png" class="image2" alt="Paris" style="width:20%; height:30%;"><br>
<h4 style="font-family: 'Fira Sans Condensed';margin-right:20px">deyaCoin</h4>
<p style="text-align:justify; margin-left: 38%;float:left;">
Get Paid instantly. The moment you sell something is the moment you get paid.</p>
</div>
<div class="col-sm-4">
<img src="Assets/img/creditcard.png" class="image2" alt="New York" style="width: 25% ;height:30%;"><br>
<h4 style="font-family: 'Fira Sans Condensed';">Credit/Debit</h4>
<p style="text-align:justify; margin-left: 38%;float:left">
we takes the user card details and process the payment transaction.
</p>
</div>
<div class="col-sm-4">
<img src="Assets/img/bank.png" class="image2" alt="San Francisco" style="width:20%;height:30%;"><br>
<h4 style="font-family: 'Fira Sans Condensed';margin-right:30px;">ACH</h4>
<p style="text-align:justify; margin-left: 38%;float:left">
We collect the bank details and process your payment in secure manner.</p>
</div>
</div>
<div class="row text-center">
<div class="col-sm-4">
<img src="Assets/img/group.png" alt="Paris" class="image2" style="width:25%; height:30%;"><br>
<h4 style="font-family: 'Fira Sans Condensed'; margin-left: 20px;">Share Expenses</h4>
<p style="text-align:justify;margin-left: 38%;float:left;">
Jack, Jane and John go on a skiing weekend together. Jack pays for the ski-hire;Jane pays the hotel; John pays for dinner.</p>
</div>
<div class="col-sm-4">
<img src="Assets/img/money.png" alt="Paris" class="image2" style="width:25%; height:30%;"><br>
<h4 style="font-family: 'Fira Sans Condensed';margin-left: 10px">ReceiveMoney</h4>
<p style="text-align:justify; margin-left: 38%;float:left;">
You can request money among your family, friends, contacts, or split money among your contacts to receive money from.</p>
</div>
</div>
</div> <br><br>