vijju
vijju

Reputation: 462

How to use media queries to fit the website to mobile view

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

Answers (1)

לבני מלכה
לבני מלכה

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

Related Questions