Reputation: 462
I am using media queries for the responsive website. But whenever the browser window size decreases the media queries will be applied according to the size. But the media query is not applied to the website whenever the browser size is set to mobile view. How to wrote those queries? this is my css and html .Whenever the is less than 760px the content should be margin right. How to do that?
@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>
Upvotes: 0
Views: 53
Reputation: 16251
You forgot px
in min-width
and do not use all
See fiddle:https://jsfiddle.net/6180Lub2/
@media screen and (max-width:760px ) and (min-width:410px) {
.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>
Upvotes: 1