remove bottom border for specific screen size-CodePudding

As you can see outer border are lighter than inner border in this form i tried to remove the bottom border for specific screen size but its not working I want when screen size matches then bottom border will remove

var x = window.matchMedia("(max-width: 992px)");
myFunction(x);
x.addListener(myFunction);

function myFunction(x) {
  if (x.matches) {
    document.getElementById("b-brdr").style.borderBottom = "none";
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div  id="ofc_use">
  <div >
    <div  id="b-brdr">
      <h5>FOR OFFICE USE ONLY</h5>
      <p>(to be filled by financial institution)</p>
    </div>
    <div >
      <div >
        <div  id="b-brdr">
          <h4>Application Type*</h4>
        </div>
        <div  id="b-brdr"><input type="checkbox" name="application"  required> New</div>
        <div  id="b-brdr"><input type="checkbox" id="update" name="application"  required> Update</div>
        <div  id="b-brdr">
          <h5 >KYC Number</h5>
          <p > (Mandotary for KYC Update Request)</p>
        </div>
        <div  id="b-brdr"><input type="text" id="kyc" ></div>
      </div>
      <div >
        <div  id="b-brdr">
          <h4>Account Type*</h4>
        </div>
        <div  id="b-brdr"><input type="checkbox" name="account"  required> Normal</div>
        <div  id="b-brdr"><input type="checkbox" name="account"  required> Minor</div>
        <div  id="b-brdr"><input type="checkbox" name="account"  required> Aadhaar OTP-based e-KYC(in non face to face mode)</div>
      </div>
    </div>
  </div>
</div>

CodePudding user response：

@Md Mohtesham Azam add this to your css below:

@media only screen and (max-width: 992px){
    #b-brdr { border-bottom:0 !important;}
}

CodePudding user response：

Does this work?

var x = window.matchMedia("(max-width: 992px)");
myFunction(x);
x.addListener(myFunction);

function myFunction(x) {
  if (x.matches) {
    document.getElementById("b-brdr").style.cssText  = "border-bottom:none !important;";
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div  id="ofc_use">
  <div >
    <div  id="b-brdr">
      <h5>FOR OFFICE USE ONLY</h5>
      <p>(to be filled by financial institution)</p>
    </div>
    <div >
      <div >
        <div  id="b-brdr">
          <h4>Application Type*</h4>
        </div>
        <div  id="b-brdr"><input type="checkbox" name="application"  required> New</div>
        <div  id="b-brdr"><input type="checkbox" id="update" name="application"  required> Update</div>
        <div  id="b-brdr">
          <h5 >KYC Number</h5>
          <p > (Mandotary for KYC Update Request)</p>
        </div>
        <div  id="b-brdr"><input type="text" id="kyc" ></div>
      </div>
      <div >
        <div  id="b-brdr">
          <h4>Account Type*</h4>
        </div>
        <div  id="b-brdr"><input type="checkbox" name="account"  required> Normal</div>
        <div  id="b-brdr"><input type="checkbox" name="account"  required> Minor</div>
        <div  id="b-brdr"><input type="checkbox" name="account"  required> Aadhaar OTP-based e-KYC(in non face to face mode)</div>
      </div>
    </div>
  </div>
</div>

Changes made:myFunction changed to document.getElementById("b-brdr").style.cssText = "border-bottom:none !important;";

Demo

Reference